:root {

  --navy: #123A49;
  --navy2: #0C2A36;
  --butter: #F3DE8E;
  --butterpale: #FAEFAE;

  --butter-grained: #ECD78A;
  --gold: #B98F3B;


  --gold-text: #8B6B2C;


  --muted-onbutter: #576166;

  --cream: #FBF6EA;
  --ink: #123A49;
  --muted: #667277;
  --mutedd: #AABEC5;
  --hairline: rgba(18, 58, 73, .1);
  --hairline-strong: rgba(18, 58, 73, .16);


  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;


  --gutter: 44px;
  --maxw: 1360px;
  --maxw-header: 1440px;

  /* Not a free number: it is 44px of logo plus the header's own padding, top and
     bottom. Nothing measures the header at runtime, so if that padding changes
     this has to change with it, or the hero and every full-screen section below
     will size themselves against a header height that no longer exists. */
  --header-h: 78px;
  --hero-styles-h: 68px;
  --section-y: clamp(78px, 10vw, 150px);
  --section-y-lg: clamp(96px, 12vw, 180px);


  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-hover: .25s;
  --t-fill: .3s;
  --dancer-cycle: 12.5s;


  color-scheme: light;
}


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

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);

  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { scrollbar-width: none; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }
a.link { transition: color var(--t-hover); }
a.link:hover { color: var(--gold-text); }

::selection { background: var(--butter); color: var(--navy); }


:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }


@media (max-width: 640px) {
  :root { --gutter: 24px; }
}


.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: -9999px;
  z-index: 300;
}
.skip-link:focus {
  left: 10px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}


.btn {
  display: inline-block;
  border-radius: 100px;
  font-family: var(--sans);
  text-transform: uppercase;
  cursor: pointer;
}


.btn--outline {
  padding: 11px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .14em;
  transition: background var(--t-fill), color var(--t-fill);
}
.btn--outline:hover { background: var(--navy); color: var(--cream); }


.btn--primary {
  padding: 16px 30px;
  border: 0;
  background: var(--navy);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: .1em;
  transition: background var(--t-fill), color var(--t-fill);
}
.btn--primary:hover { background: var(--gold); color: var(--navy2); }


.btn--fees { padding: 16px 34px; letter-spacing: .12em; }


.btn--butter {
  padding: 17px 38px;
  border: 0;
  background: var(--butter);
  color: var(--navy2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background var(--t-fill), color var(--t-fill);
}
.btn--butter:hover { background: var(--cream); }


.btn--glow {
  position: relative;
  box-shadow: 0 0 26px 2px rgba(243, 222, 142, .3);
  transition: background var(--t-fill), color var(--t-fill), box-shadow var(--t-fill);
}
.btn--glow:hover { box-shadow: 0 0 34px 6px rgba(243, 222, 142, .45); }

.btn--glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(243, 222, 142, .5);
  animation: butterPulse 2.8s var(--ease) infinite;
}


@keyframes butterPulse {
  0%   { box-shadow: 0 0 0 0 rgba(243, 222, 142, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(243, 222, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 222, 142, 0); }
}


.btn--ghost {
  padding: 17px 38px;
  border: 1px solid rgba(251, 246, 234, .45);
  background: transparent;
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background var(--t-fill), color var(--t-fill), border-color var(--t-fill);
}
.btn--ghost:hover { background: var(--cream); color: var(--navy2); border-color: var(--cream); }


@keyframes markIn { 0% { opacity: 0; transform: translateY(16px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes lineGrow { 0% { width: 0; } 100% { width: 210px; } }

@keyframes dancerCycle {
  0%        { opacity: 0; }
  5%,  15%  { opacity: 1; }
  20%, 100% { opacity: 0; }
}


.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s var(--ease) var(--d, 0s),
    transform .9s var(--ease) var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }


@keyframes introOut {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  animation: introOut 1s 2.6s forwards ease;
}

.intro__mark   { height: 124px; width: auto; opacity: 0; animation: markIn 1.3s .15s forwards ease-out; }
.intro__lockup { height: 42px;  width: auto; opacity: 0; animation: fadeUp 1.1s .7s forwards ease-out; }
.intro__line   { width: 0; height: 1px; background: rgba(243, 222, 142, .6); animation: lineGrow 1.5s .95s forwards ease-out; }

.intro__skip {
  position: absolute;
  bottom: 36px;
  right: 40px;
  background: none;
  border: 0;
  color: rgba(251, 246, 234, .55);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-hover);
}
.intro__skip:hover { color: var(--cream); }
.intro__skip:focus-visible { outline: 2px solid var(--butter); outline-offset: 4px; }


.intro.is-dismissed {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .65s ease, visibility 0s .65s;
}


.intro-off .intro { display: none; }


.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--butter);
}

.site-header__inner {
  max-width: var(--maxw-header);
  margin: 0 auto;
  /* Keep this in step with --header-h. 17px each side of a 44px logo is 78px, and
     78px is the approved ribbon: it was tried at 23/90px on 2026-07-24 and sent
     back. */
  padding: 17px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo { display: flex; align-items: center; }

.site-header__logo img { height: 44px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav__link {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity var(--t-hover), color var(--t-hover);
}
.site-nav__link:hover { opacity: 1; }


/* Book a Class, at the right end of the ribbon. The one thing in the header that
   reads as a button rather than a link. Sized to sit inside the 44px logo, so the
   header keeps its height and --header-h, which the hero and every full-screen
   section measure against, does not move.

   Two states. On the hero it is the outline, because the hero has its own solid
   butter Book a Class and two filled buttons shouting the same words is one too
   many. Past the hero that one is gone, so this becomes the solid one and is the
   only booking button left on screen. The outline is an inset shadow rather than
   a border, so both states are exactly the same size and nothing shifts when it
   fills in. */
.site-nav__cta {
  flex: none;
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 100px;
  transition: background var(--t-fill), color var(--t-fill);
}
.site-nav__cta:hover { background: var(--navy); color: var(--butter); }
.site-nav__cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Set by script.js once the hero has left the screen. If that never runs the
   button simply stays the outline, which is legible navy on butter at every
   scroll position: the fill is a flourish, never the thing that makes it
   readable. */
.site-header.is-past-hero .site-nav__cta {
  background: var(--navy);
  color: var(--butter);
}
.site-header.is-past-hero .site-nav__cta:hover { background: var(--navy2); color: var(--cream); }


.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-fill) var(--ease), background .15s linear;
}
.nav-toggle__bars { top: 21.25px; }
.nav-toggle__bars::before { content: ''; left: 0; top: -6px; }
.nav-toggle__bars::after  { content: ''; left: 0; top: 6px; }


.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 859px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 30px;
    background: var(--cream);
    border-bottom: 1px solid var(--hairline);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;

    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  }

  .site-header.is-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }

  .site-nav__link {
    padding: 19px 0;
    opacity: 1;
    border-bottom: 1px solid var(--hairline);
  }

  /* In the dropdown it becomes a full-width button under the links, rather than a
     pill floating at the end of a stacked list. */
  .site-nav__cta {
    margin-top: 20px;
    padding: 16px 22px;
    text-align: center;
  }
}


.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: grid;

  grid-template-columns: 1fr 1fr;
  align-items: center;


  background: var(--navy);
  color: var(--cream);
  --ink: var(--cream);
  --muted: var(--mutedd);
  --gold-text: var(--butter);


  padding-bottom: var(--hero-styles-h);
}


.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");


  opacity: .12;
  mix-blend-mode: screen;
}


.hero__art  { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.hero__copy { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }


.hero__art {
  position: relative;
  align-self: stretch;
  overflow: hidden;
}


.hero__art::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
              rgba(243, 222, 142, .30),
              rgba(243, 222, 142, .16) 45%,
              rgba(18, 58, 73, 0) 72%);
}


.hero__art-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
}


.hero__dancer {
  grid-area: 1 / 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;


  object-position: bottom;
}


.hero__dancer--cycling {
  opacity: 0;
  animation: dancerCycle var(--dancer-cycle) linear infinite;
}
.hero__dancer--cycling:nth-child(1) { animation-delay: calc(var(--dancer-cycle) * 0 / 5); }
.hero__dancer--cycling:nth-child(2) { animation-delay: calc(var(--dancer-cycle) * 1 / 5); }
.hero__dancer--cycling:nth-child(3) { animation-delay: calc(var(--dancer-cycle) * 2 / 5); }
.hero__dancer--cycling:nth-child(4) { animation-delay: calc(var(--dancer-cycle) * 3 / 5); }
.hero__dancer--cycling:nth-child(5) { animation-delay: calc(var(--dancer-cycle) * 4 / 5); }


.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px clamp(40px, 5vw, 96px) 72px clamp(24px, 3vw, 64px);
}

.hero__eyebrow {
  margin: 0 0 30px;
  font-size: 12.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-text);
  --d: 0s;
}


.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 6.8vw, 102px);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--ink);
  --d: .08s;
}

.hero__title em {
  font-style: italic;
  font-weight: 700;

  color: inherit;
}


.hero__title b {
  font-weight: 700;
  font-style: normal;
  color: inherit;
}

.hero__rule {
  width: 64px;
  height: 2px;
  margin: 32px 0 0;
  background: var(--gold);
  --d: .12s;
}


.hero__sub {
  margin: 24px 0 0;
  font-size: clamp(16px, 1.55vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
  white-space: nowrap;
  --d: .16s;
}


.hero__place {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  --d: .2s;
}


.hero__place::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 46px;
  flex-wrap: wrap;
  --d: .24s;
}


.hero .btn--primary {
  background: var(--butter);
  color: var(--navy2);
}
.hero .btn--primary:hover {
  background: var(--cream);
  color: var(--navy2);
}

.hero__link {
  position: relative;
  font-size: 14px;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color var(--t-hover), border-color var(--t-hover);
}
.hero__link:hover { color: var(--gold-text); border-color: var(--gold); }


.hero__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}


@media (max-width: 1024px) {
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;

    padding-bottom: 0;

    }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    padding: clamp(56px, 9vw, 88px) var(--gutter) 0;
  }

  .hero__art {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    height: clamp(300px, 44vh, 440px);
    margin-top: clamp(40px, 6vw, 64px);
  }


  .hero__art-inner { inset: 0; }

  .hero__dancer { height: 100%; max-width: 100%; }
}


@media (max-width: 640px) {
  .hero__sub { font-size: 17px; white-space: normal; }
  .hero__ctas { gap: 22px; }
}


.hero__styles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  box-sizing: border-box;
  height: var(--hero-styles-h);


  margin: 0;
  padding: 0 max(var(--gutter), (100% - var(--maxw)) / 2);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;

  list-style: none;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;


  background: var(--butter);
  color: var(--muted-onbutter);
}

.hero__styles li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero__styles li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}


@media (max-width: 1024px) {
  .hero__styles {
    position: static;
    height: auto;
    padding: 22px var(--gutter);
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 26px;
  }
}


.thalia {
  position: relative;
  background: var(--navy);
  color: var(--cream);
  /* Focus ring token, re-pointed for a dark ground: gold is 2.45:1 on navy and
     fails 1.4.11, butter is 9.06:1. Same override .hero uses. */
  --gold-text: var(--butter);
  padding: var(--section-y-lg) 0;
}


.thalia__bg {
  position: absolute;
  inset: 0;
  max-width: 1320px;
  margin: 0 auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}


.thalia__bg::before {
  content: '';
  position: absolute;
  left: 80%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(680px, 52vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 222, 142, .16), rgba(18, 58, 73, 0) 70%);
}


.thalia__bg img {
  position: absolute;
  right: var(--gutter);
  top: 10%;
  height: 80%;
  width: auto;

  max-width: 43%;
  opacity: 1;
  object-fit: contain;
  object-position: top right;
}


.thalia__grid {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;

  grid-template-columns: minmax(0, 1.02fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 140px);
}


.thalia__portrait {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 440px;
}


.thalia__portrait::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid rgba(243, 222, 142, .5);
}

.thalia__portrait img {
  position: relative;
  display: block;
  width: 100%;

  height: auto;
  aspect-ratio: 4 / 5;

  object-fit: cover;
}


.thalia__portrait.reveal {
  transform: none;
  transition: opacity 1.4s var(--ease) .1s;
}


.thalia__copy {
  grid-column: 1;
  position: relative;
  z-index: 3;
  text-align: right;
}

.thalia__eyebrow {
  margin: 0 0 22px;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--butter);
  --d: 0s;
}

.thalia__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--cream);
  --d: .08s;
}

.thalia__title em { font-style: italic; color: var(--butter); }


.thalia__lead {
  margin: 26px 0 0 auto;
  font-size: 18px;
  line-height: 1.68;
  color: var(--mutedd);
  max-width: 58ch;
  text-wrap: balance;
  --d: .16s;
}
.thalia__lead + .thalia__lead { --d: .24s; }


.thalia__actions {
  margin: 40px 0 0;
  --d: .32s;
}


.thalia__link {
  position: relative;
  display: inline-block;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--cream);
  border-bottom: 1px solid rgba(243, 222, 142, .5);
  padding-bottom: 3px;
  transition: color var(--t-hover), border-color var(--t-hover);
}
.thalia__link:hover { color: var(--butter); border-color: var(--butter); }


.thalia__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}


.thalia__wave,
.styles__wave,
.fees__wave,
.gtk__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 4;
  width: 100%;
  height: 92px;
  display: block;
  pointer-events: none;
}


/* Classes only. Its wave lives inside the section's bottom padding, and that
   padding is on vh, so the wave has to scale with it. Left at a flat 92px it
   would swallow the tightened padding on a short window and ride up over
   "COMPETITION & STAGE". The other two sections are not height-constrained, so
   they keep the flat 92px above. */
.styles__wave { height: clamp(38px, calc(9vh - 18px), 96px); }

.thalia__wave path { fill: var(--butter-grained); }
.styles__wave path { fill: var(--navy); }
.fees__wave   path { fill: var(--cream); }


.thalia__wave--top {
  top: -1px;
  bottom: auto;
  z-index: 1;
}
.thalia__wave--top path { fill: var(--butter-grained); }


/* Desktop puts Thalia's photo in the right-hand half of the section. Below the
   stacking breakpoint there is no right-hand half, so the mobile portrait takes
   over instead. Only ever one of the two is in the layout, so only one is in the
   accessibility tree and the browser fetches the file once. */
.thalia__mportrait { display: none; }

@media (max-width: 1024px) {
  .thalia__grid {
    grid-template-columns: 1fr;
    gap: clamp(44px, 6vw, 64px);
    justify-items: start;
  }


  .thalia__copy { grid-column: 1; }


  /* The photo used to drop behind the copy at .22 opacity. Stacked, that is not a
     backdrop, it is Thalia's face ghosted under nine lines of text: her eyes land
     mid-paragraph and it reads as a rendering fault. Meet Thalia should show her,
     so the ghost goes and a real portrait leads the section. */
  .thalia__bg { display: none; }

  /* Same frame as the portrait in the contact section, so the two readings of her
     on one site match: 4:5, softly rounded, with the butter rule offset behind it. */
  .thalia__mportrait {
    display: block;
    position: relative;
    /* Centred, with the offset rule's 14px of overhang counted on the left so the
       picture itself lands on the middle rather than the picture-plus-frame. */
    margin: 0 auto clamp(26px, 3.6vh, 38px);
    margin-left: calc(50% - min(200px, 54vw) / 2 - 7px);
    width: min(200px, 54vw);
    --d: .04s;
  }
  .thalia__mportrait::before {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 1px solid rgba(243, 222, 142, .5);
    border-radius: 15px;
  }
  .thalia__mportrait img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Framed on her face, not the centre of a full-length portrait. */
    object-position: 50% 14%;
    border-radius: 14px;
  }

  /* Right-ragged long-form copy is a desktop device that needs the photo beside it
     to justify the edge. Stacked, it just makes every line start somewhere new. */
  .thalia__copy { text-align: left; }
  .thalia__lead { margin-left: 0; margin-right: 0; max-width: none; }

  /* The label rides with the portrait, so the two read as one centred masthead
     above the story. The story itself stays left-aligned: nine centred lines is
     a poem, not a paragraph. */
  .thalia__eyebrow { text-align: center; }

  /* Buying back the height the portrait costs, so the section still holds a screen.
     The padding itself is trimmed further down, after the full-screen block that
     would otherwise outrank this one. */
  .thalia__eyebrow { margin-bottom: 14px; }
  .thalia__title { font-size: clamp(32px, 4.6vw, 64px); }
  .thalia__lead { margin-top: 20px; }
  .thalia__actions { margin-top: 28px; }
}

@media (max-width: 640px) {
  .thalia__portrait { max-width: 100%; }
  .thalia__lead { font-size: 16px; line-height: 1.58; }


  .thalia__portrait::before { inset: 14px -14px -14px 14px; }
}


/* THIS SECTION IS SIZED IN vh, AND THAT IS THE WHOLE POINT.

   Chenélle asked for it to fit her screen (2026-07-22), then, once it did, said
   it was "too small". Both are the same bug: every vertical measure here used to
   be a px clamp driven by WIDTH, so the section had one fixed height regardless
   of the window. It overflowed a 900px laptop and left ~230px of dead air on a
   1131px monitor. A width query cannot help, because it cannot tell a 1440x1000
   window from a 1440x700 one.

   So the section scales with viewport HEIGHT: padding, the gap under the head,
   the row gap, the class name, the title, the tag and the wave all move together
   on vh. Their ratios hold, so it fills a tall screen and shrinks onto a short
   one without any breakpoint to fall off. A two-tier max-height version was
   tried first and removed: it snapped, so a 940px window and a 700px one got
   identical spacing and one of them was always wrong.

   Each value keeps a px floor and ceiling. The floor stops it collapsing on a
   phone in landscape, the ceiling stops a huge monitor turning it into a poster.
   Every clamp's middle term is min(vw, vh) where the value must also respect
   width, so a wide-but-short window is driven by whichever runs out first.

   The padding is asymmetric on purpose, not a shorthand slip: .styles__wave is
   opaque navy sitting INSIDE the bottom padding, so the bottom has to carry the
   wave plus clearance while the top carries only air. Matching the *visible* air
   at both ends is what the asymmetry buys. Keep bottom ≳ wave + 90px or the navy
   rides up over "COMPETITION & STAGE". */
.styles {
  position: relative;
  background: var(--butter);
  padding: clamp(20px, calc(6.5vh - 22px), 80px) 0 clamp(78px, calc(17vh - 32px), 170px);

  --styles-name-fs: clamp(22px, min(2.8vw, calc(6.4vh - 16px)), 52px);
  --styles-name-lh: 1.06;
}


.styles::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .22;
  mix-blend-mode: multiply;
}


.styles__inner { position: relative; z-index: 1; }


/* 1060px is the design's width for the timeline, and it stays the floor: narrower
   than the page's --maxw so the two sides hold close enough to the spine to read
   as one object.

   It grows on a big screen because the class names now do. The names scale with
   viewport height, and a 50px "Contemporary & Lyrical" does not fit a column cut
   from 1060px: it wrapped to two lines. The container has to grow with its
   contents or the type just runs out of room. Capped at 1240px so the two sides
   never drift so far apart that the spine stops holding them together. */
.styles__inner {
  max-width: clamp(1060px, 68vw, 1300px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* On vh with the rest of the section, so the gap under the title opens up on a
   tall screen and closes on a short one. */
.styles__head {
  text-align: center;
  margin-bottom: clamp(16px, calc(6vh - 20px), 60px);
}


.styles__eyebrow {
  margin: 0 0 20px;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--navy);
  --d: 0s;
}

/* Height-capped as well as width-capped, like the class names below it: on a
   short window the title has to give way with everything else, or it eats the
   room the six classes need. */
.styles__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, min(4.4vw, 5.8vh), 56px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  --d: .06s;
}
.styles__title em { font-style: italic; font-weight: 500; }


.styles__timeline { position: relative; }


.styles__spine {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  transform: translateX(-50%);

  background: linear-gradient(
    rgba(18, 58, 73, 0),
    rgba(18, 58, 73, .5) 11%,
    rgba(18, 58, 73, .5) 89%,
    rgba(18, 58, 73, 0)
  );
}


/* The gap between rows. It is four gaps, so every pixel here costs four: this is
   the single biggest lever on the section's height, which is why it is on vh
   like everything else. The spine still runs between the dots, so the rows read
   as one thread rather than a stack at any size. */
.styles__item {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: start;
  margin-bottom: clamp(10px, calc(4.6vh - 14px), 40px);
  color: var(--ink);
}
.styles__item:last-of-type { margin-bottom: 0; }


.styles__item:nth-of-type(1) { --d: 0s; }
.styles__item:nth-of-type(2) { --d: .08s; }
.styles__item:nth-of-type(3) { --d: .16s; }
.styles__item:nth-of-type(4) { --d: .24s; }
.styles__item:nth-of-type(5) { --d: .32s; }


.styles__side--left {
  grid-column: 1;
  text-align: right;
  padding-right: 34px;
}
.styles__side--right {
  grid-column: 3;
  text-align: left;
  padding-left: 34px;
}


.styles__q { margin: 0; }

.styles__trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
  color: inherit;
  font-family: inherit;
}


.styles__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--styles-name-fs);
  line-height: var(--styles-name-lh);
  color: inherit;
}


.styles__label {
  display: inline-block;
  transform-origin: right center;
  transition: transform .28s var(--ease);
}
.styles__side--right .styles__label { transform-origin: left center; }

.styles__trigger:hover .styles__label,
.styles__trigger:focus-visible .styles__label { transform: scale(1.075); }


.styles__icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 14px;
  vertical-align: middle;
  transition: transform .35s var(--ease);
}
.styles__icon::before,
.styles__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--navy);
  transform: translateY(-50%);
}
.styles__icon::after { transform: translateY(-50%) rotate(90deg); }

.styles__entry[data-open="1"] .styles__icon { transform: rotate(45deg); }


/* The gap above the tag is on vh too. It is small, but it appears in all six
   rows, so it is worth six times what it looks. The tag's own size stays fixed:
   it is already at the floor of what a label can be read at. */
.styles__tag {
  display: block;
  margin-top: clamp(6px, 1vh, 12px);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-onbutter);
}


.styles__panel { overflow: hidden; }

.js .styles__panel {
  max-height: 0;
  visibility: hidden;

  transition: max-height .5s ease, visibility 0s linear .5s;
}

.js .styles__entry[data-open="1"] .styles__panel {
  visibility: visible;
  transition: max-height .5s ease, visibility 0s linear 0s;
}


.styles__answer { padding: 16px 0 4px; }


.styles__answer p {
  margin: 0;
  max-width: 44ch;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted-onbutter);
}
.styles__answer p + p { margin-top: 12px; }

.styles__side--left .styles__answer p { margin-left: auto; }


.styles__cta { margin-top: 18px !important; }


.styles__cta a {
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--navy);
  border-bottom: 1px solid rgba(18, 58, 73, .45);
  padding-bottom: 3px;
  transition: border-color var(--t-hover);
}
.styles__cta a:hover { border-color: var(--navy); }


.styles__dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin-top: calc((var(--styles-name-fs) * var(--styles-name-lh) - 15px) / 2);
  width: 15px;
  height: 15px;
  border-radius: 50%;

  background: var(--butter);
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 5px var(--butter);

  transform: scale(.55);
  transition:
    transform .7s var(--ease) var(--d, 0s),
    background var(--t-hover);
}
.styles__item.is-visible .styles__dot { transform: scale(1); }


.styles__item:last-of-type .styles__dot { background: var(--navy); }


.styles__item:has(.styles__side:hover) .styles__dot,
.styles__item:has(.styles__entry[data-open="1"]) .styles__dot { background: var(--navy); }


@media (max-width: 780px) {
  .styles__spine {
    left: 6.5px;
    transform: none;
  }

  .styles__item {
    grid-template-columns: 15px minmax(0, 1fr);
    column-gap: 22px;
  }

  .styles__dot {
    grid-column: 1;
    justify-self: start;

  }


  .styles__side--left,
  .styles__side--right {
    grid-column: 2;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }


  .styles__side--left .styles__label,
  .styles__side--right .styles__label { transform-origin: left center; }


  .styles__side--left .styles__answer p { margin-left: 0; }

  .styles__item { margin-bottom: 34px; }


  .styles__dot + .styles__side { margin-top: 34px; }
}

/* The max-height tier that used to sit here is gone. It snapped: a 940px window
   and a 700px one got identical spacing, so one of them was always wrong, and it
   left a 1131px monitor with ~230px of dead air because nothing above the
   breakpoint grew. The vh clamps on .styles now do the same job continuously,
   with no edge to fall off. Do not reintroduce a height breakpoint here. */


.fees {
  position: relative;
  background: var(--navy);
  color: var(--cream);
  --gold-text: var(--butter);
  padding: var(--section-y) 0;
}


.fees__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}


.fees__title {
  margin: 0 0 46px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--cream);
  --d: 0s;
}


.fees__list { text-align: left; }

.fees__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;

  border-bottom: 1px solid rgba(251, 246, 234, .18);
}


.fees__row:nth-child(1) { --d: .1s; }
.fees__row:nth-child(2) { --d: .14s; }
.fees__row:nth-child(3) { --d: .18s; }
.fees__row:nth-child(4) { --d: .22s; }
.fees__row:nth-child(5) { --d: .26s; }

.fees__row:nth-child(6) { --d: .3s; }

.fees__label {
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 26px);
  color: var(--cream);
}


.fees__leader {
  flex: 1;
  border-bottom: 1px dotted rgba(251, 246, 234, .42);
  transform: translateY(-5px);
}

.fees__price {
  font-size: 17px;
  color: var(--cream);
  white-space: nowrap;
}


.fees__notes {
  margin: 28px 0 40px;
  text-align: left;
  --d: .34s;
}


.fees__note { border-top: 1px solid rgba(251, 246, 234, .18); }

.fees__note-q { margin: 0; }


.fees__note-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--butter);
  transition: color var(--t-hover);
}
.fees__note-trigger:hover { color: var(--cream); }

.fees__note-icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform .35s var(--ease);
}

.fees__note-icon::before,
.fees__note-icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.fees__note-icon::after { transform: translateY(-50%) rotate(90deg); }

.fees__note[data-open="1"] .fees__note-icon { transform: rotate(45deg); }


.fees__note-panel { overflow: hidden; }

.js .fees__note-panel {
  max-height: 0;
  visibility: hidden;

  transition: max-height .5s ease, visibility 0s linear .5s;
}

.js .fees__note[data-open="1"] .fees__note-panel {
  visibility: visible;
  transition: max-height .5s ease, visibility 0s linear 0s;
}


.fees__note-body {
  padding: 2px 0 24px;
  columns: 2;
  column-gap: clamp(32px, 5vw, 60px);
}

.fees__note-body p {
  font-size: 14px;
  line-height: 1.6;

  color: var(--mutedd);
  margin: 0 0 14px;
  break-inside: avoid;
}
.fees__note-body p:last-child { margin-bottom: 0; }

.fees__cta { --d: .38s; }


.fees .btn--primary { background: var(--butter); color: var(--navy2); }
.fees .btn--primary:hover { background: var(--cream); color: var(--navy2); }


@media (max-width: 560px) {
  .fees__row { gap: 12px; padding: 18px 0; }
  .fees__label { font-size: 18px; }
  .fees__price { font-size: 15px; }

  .fees__note-body { columns: 1; }
}


.gtk {
  position: relative;
  background: var(--cream);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--hairline);


  padding-bottom: max(var(--section-y), 104px);
}


.gtk__motif {
  display: block;
  width: 100%;
  /* This squiggle is the whole reason "Everything you need to know" sat so far from
     "Frequently Asked Questions". Measured at 1440x900, that gap was 387px and 252
     of them were this: 96px of stroke with 78px of margin either side. It is a
     divider between two halves of one section, so it should read as lighter than
     the gaps BETWEEN sections (~335px), not heavier. At 56/26 the gap comes to
     239px and the two halves read as related again. */
  height: clamp(48px, 4vw, 56px);

  /* Uneven margins, to land the line centred between the two blocks it divides
     (Chenelle 2026-07-24: "the same amount of spacing from top to bottom"). Equal
     margins do not do that here. The squiggle sits between two full-screen panels
     whose content is centred, so each contributes its own leftover slack to the
     gap, and the two are not the same: at 1440x900 the panel above leaves 32px
     under its last card and the one below leaves 103px over its heading, so equal
     margins put the line 71px too high.

     Worse, that difference is not a constant to cancel out. It is 71px at 900 tall
     and 37px at 768, because the two panels' slack shrinks at different rates. So
     the correction is vh-driven too: margin-top grows and margin-bottom shrinks as
     the screen gets taller. Measured off-centre by 5px at 900, 2px at 800 and 7px
     at 768, all under 3% of the gap. Floored at 0 rather than going negative. */
  margin: clamp(40px, calc(12.9vh - 50px), 90px) 0 clamp(0px, calc(104px - 12.9vh), 30px);
  pointer-events: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: .16;
}

.gtk__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}


.gtk__head { text-align: center; }

.gtk__eyebrow {
  --d: 0s;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 22px;
}

.gtk__title {
  --d: .06s;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}

.gtk__sub {
  --d: .12s;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 26px auto 0;
  max-width: 58ch;
}

.gtk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 86px);
  margin-top: clamp(56px, 6vw, 84px);
}


.gtk__col:nth-child(1) { --d: 0s; }
.gtk__col:nth-child(2) { --d: .08s; }


.gtk__subhead {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}


.gtk__subhead--faq {
  font-size: clamp(26px, 3vw, 38px);
}

.gtk__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 52ch;
}


.gtk__card {
  margin-top: 22px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 0 18px 40px -28px rgba(18, 58, 73, .5);
}

.venues { list-style: none; margin: 0; padding: 0; }

.venue + .venue {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.venue__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.venue__addr {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 34ch;
}

.venue__link { margin-top: 16px; }


.gtk__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 24px 0 0;
}


.bring {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}


.bring__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.bring__item + .bring__item {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.bring__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
}

.bring__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bring__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

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


.gtk__faq { margin-top: 0; }

.faq { margin-top: 30px; }

.faq__item { border-top: 1px solid var(--hairline-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline-strong); }


.faq__q { margin: 0; font: inherit; }

.faq__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--t-hover);
}
.faq__trigger:hover { color: var(--gold-text); }


.faq__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform .35s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--gold);
  transform: translateY(-50%);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }

.faq__item[data-open="1"] .faq__icon { transform: rotate(45deg); }


.faq__panel { overflow: hidden; }

.js .faq__panel {
  max-height: 0;
  visibility: hidden;

  transition: max-height .5s ease, visibility 0s linear .5s;
}

.js .faq__item[data-open="1"] .faq__panel {
  visibility: visible;
  transition: max-height .5s ease, visibility 0s linear 0s;
}


.faq__answer { padding: 0 0 26px; }

.faq__answer p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}

.faq__rules {
  margin: 0;
  padding: 0 0 0 20px;
  max-width: 68ch;
}
.faq__rules li {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.faq__rules li + li { margin-top: 8px; }
.faq__rules::marker { color: var(--gold-text); }

.faq__link {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  transition: color var(--t-hover);
}
.faq__link:hover { color: var(--gold-text); }


@media (max-width: 1024px) {
  .gtk__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 7vw, 68px);
  }
  .gtk__card { max-width: 640px; }
  .bring { max-width: 640px; }
}

@media (max-width: 640px) {
  .gtk__card { padding: 22px 18px; }
  .bring__item { gap: 14px; }


  .venue__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}


.gtk__wave path { fill: var(--navy2); }


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


.contact {
  background: var(--navy2);
  color: var(--cream);
  --gold-text: var(--butter);
  padding: clamp(40px, 5vw, 70px) 0 clamp(56px, 6vw, 80px);
}

.contact__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.contact__eyebrow {
  margin: 0 0 22px;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--butter);
  --d: 0s;
}


.contact__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 82px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--cream);
  --d: .06s;
}
.contact__title em { font-style: italic; }


.contact__lead {
  margin: 28px auto 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--mutedd);
  --d: .12s;
}


@media (max-width: 520px) {
  .contact__lead br { display: none; }
  .contact__lead { text-wrap: balance; }
}

.contact__actions { margin: 40px 0 0; --d: .16s; }


.contact__panel {

  margin: clamp(44px, 5vw, 68px) 0 0;
  display: grid;

  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(30px, 5vw, 60px);
  text-align: left;
}


.contact__portrait {
  position: relative;
  margin: 0;
  width: clamp(170px, 21vw, 250px);
  --d: .12s;
}


.contact__portrait::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid rgba(185, 143, 59, .45);

  border-radius: 15px;
}

.contact__portrait img {
  position: relative;
  display: block;
  width: 100%;

  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;

  border-radius: 14px;
}


.contact__portrait.reveal {
  transform: none;
  transition: opacity 1.4s var(--ease) .1s;
}


.contact__ask .contact__actions { margin-top: 0; }


@media (max-width: 700px) {
  .contact__panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(34px, 7vw, 48px);
  }


  .contact__portrait { width: min(230px, 62vw); }
}


.site-footer {
  background: var(--navy2);
  --gold-text: var(--butter);
  padding: clamp(64px, 8vw, 100px) var(--gutter) 0;
}

.site-footer__inner {

  max-width: calc(900px - var(--gutter) * 2);
  margin: 0 auto;
  padding: 30px 0;
  border-top: 1px solid rgba(251, 246, 234, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer__lockup {
  height: 26px;
  width: auto;
  opacity: .9;
}


.site-footer__legal {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--mutedd);
}

.site-footer__link {
  color: var(--mutedd);
  border-bottom: 1px solid rgba(243, 222, 142, .4);
  padding-bottom: 2px;
  transition: color var(--t-hover), border-color var(--t-hover);
}
.site-footer__link:hover { color: var(--butter); border-color: var(--butter); }


@media (max-width: 720px) {
  .site-footer__inner {
    justify-content: flex-start;
    gap: 22px;
  }
}


.home-chip {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: var(--gutter);
  z-index: 40;

  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;

  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);

  background: rgba(18, 58, 73, .8);
  border: 1px solid rgba(251, 246, 234, .22);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 22px rgba(6, 26, 34, .22);

  transition: background var(--t-hover), border-color var(--t-hover),
              transform var(--t-hover);
}

.home-chip:hover {
  background: rgba(18, 58, 73, .92);
  border-color: rgba(243, 222, 142, .55);
  transform: translateY(-1px);
}

.home-chip:focus-visible {
  /* The chip floats over both the cream and the navy sections, so a single
     colour fails on one of them: butter is 1.24:1 on cream. A navy ring inside
     a butter halo reads on both (11.27:1 on cream, 9.06:1 on navy). */
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--butter);
}


.story-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  padding: clamp(30px, 4vw, 54px) 0 92px;
}

.story-hero__grid {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;

  grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
}


.story-hero__figure {
  position: relative;
  z-index: 1;
  margin: 0 0 -92px;
  align-self: end;
  justify-self: center;
  max-width: 460px;
}


.story-hero__figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 222, 142, .22), rgba(18, 58, 73, 0) 70%);
  pointer-events: none;
}

.story-hero__figure img {
  position: relative;
  display: block;
  width: 100%;

  height: auto;
}


.story-hero__figure.reveal {
  transform: none;
  transition: opacity 1.6s var(--ease) .1s;
}

.story-hero__copy { position: relative; z-index: 2; }

.story-hero__eyebrow {
  margin: 0 0 22px;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;

  color: var(--butter);
  --d: 0s;
}

.story-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--cream);
  --d: .08s;
}
.story-hero__title em { font-style: italic; color: var(--butter); }

.story-hero__lead {
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.68;
  color: var(--mutedd);
  max-width: 48ch;
  --d: .16s;
}


.story {
  background: var(--cream);
  padding: var(--section-y) 0 var(--section-y);
}

.story__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}


.story__movement + .story__movement { margin-top: clamp(64px, 9vw, 116px); }

.story__heading {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  --d: 0s;
}


.story__opening {
  margin: 0 auto;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 34ch;
  --d: .08s;
}


.story__p {
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 46ch;
  --d: .12s;
}
.story__p + .story__p { margin-top: 22px; --d: .18s; }


.story__p--close {
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 32ch;
  --d: .24s;
}


.creds__grid {
  margin: clamp(34px, 4vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 44px) clamp(34px, 5vw, 64px);
  text-align: left;
}

.creds__cell {
  padding-top: 22px;
  border-top: 1px solid rgba(18, 58, 73, .16);
}

.creds__term {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
}

.creds__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.68;

  color: var(--muted);
}


.story-gallery {
  position: relative;
  background: var(--cream);
  padding: 0 0 calc(var(--section-y) + 92px);
}


.story-gallery__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.story-gallery__head {
  text-align: center;
  margin-bottom: clamp(38px, 4vw, 62px);
}

.story-gallery__eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-text);
  --d: 0s;
}

.story-gallery__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
  --d: .06s;
}
.story-gallery__title em { font-style: italic; font-weight: 500; }


.story-gallery__grid {
  display: flex;
  gap: clamp(14px, 1.4vw, 20px);
  margin: 0;
  padding: 0 var(--gutter) 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);

  scrollbar-width: thin;
  scrollbar-color: rgba(18, 58, 73, .3) transparent;

  -webkit-overflow-scrolling: touch;
}


.story-gallery__inner { max-width: none; padding: 0; }
.story-gallery__head { max-width: 960px; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }


.story-gallery__grid:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 4px;
}


.story-gallery__inner { position: relative; }
.story-gallery__inner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6px;
  width: clamp(40px, 6vw, 96px);
  background: linear-gradient(90deg, rgba(251, 246, 234, 0), var(--cream));
  pointer-events: none;
  z-index: 1;
}

.story-gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}

.story-gallery__item img {
  display: block;

  height: clamp(300px, 40vw, 460px);
  width: auto;
  border-radius: 2px;
}


.story-hero__wave,
.story-gallery__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
  width: 100%;
  height: 92px;
  display: block;
  pointer-events: none;
}

.story-hero__wave path    { fill: var(--cream); }
.story-gallery__wave path { fill: var(--navy2); }


.story-quote {
  background: var(--navy2);
  color: var(--cream);
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 92px);
}

.story-quote__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.story-quote__q { margin: 0; --d: 0s; }

.story-quote__q p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1.36;
  letter-spacing: -.005em;
  color: var(--cream);
}

.story-quote__by {
  margin-top: 28px;
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--butter);
  --d: .12s;
}


.page-cta {
  background: var(--navy2);
  color: var(--cream);
  padding: 0 0 0;
}

.page-cta__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.page-cta__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--cream);
  --d: 0s;
}
.page-cta__title em { font-style: italic; }

.page-cta__lead {
  margin: 24px auto 0;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--mutedd);
  max-width: 46ch;
  --d: .08s;
}

.page-cta__actions {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  --d: .16s;
}


@media (max-width: 1024px) {
  .story-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 52px);
  }


  .story-hero__figure {
    justify-self: center;
    max-width: min(340px, 72vw);
  }
}


@media (max-width: 640px) {
  .creds__grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 6vw, 32px);
  }
}

@media (max-width: 640px) {
  .story-hero__lead { font-size: 17px; }
  .page-cta__actions { flex-direction: column; align-items: stretch; }
}


/* ------------------------------------------------- full-screen sections */

/* Every section fills the screen top to bottom, on any size of display.

   min-height, never height. The FAQ's seven questions, the Classes timeline and
   the contact panel are all taller than a short laptop viewport, and a fixed
   height would clip them. "At least one screen" fills a large display and still
   lets tall content grow, which is what makes this safe everywhere.

   100svh, with the 100vh line kept above it as the fallback. On phones 100vh is
   the viewport at its TALLEST, with the address bar hidden, so a 100vh block is
   taller than what is actually on screen and its bottom is cut off on load. svh
   is the small viewport, the part the visitor can really see. Browsers that do
   not know svh simply keep the vh value.

   Centred, so a section shorter than the screen sits in the middle of it instead
   of being stranded at the top under a gap.

   The two .gtk__inner panels are targeted rather than .gtk itself, because that
   one section holds BOTH "Everything you need to know" and the FAQ, and each of
   those is meant to be its own screen. */
.thalia,
.styles,
.fees,
.contact,
.gtk__inner {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ...but not on a phone. A screen-per-section is a wide-screen idea: there, a
   section runs out of content before it runs out of height and the centring reads
   as composure. Stacked into a 375px column the same content is far taller, so the
   only sections still short enough to be stretched are the ones that then hold
   their content apart with dead air (Chenélle 2026-07-23: "a very large space
   between What to Bring to Class and the Frequently Asked Questions"). Measured on
   a 375x812 screen, the stretch was padding the FAQ by 168px, fees by 137px, styles
   by 116px and contact by 102px, the last of which is the gap under WhatsApp Thalia
   and above the footer. Content decides the height here. */
@media (max-width: 860px) {
  .thalia,
  .styles,
  .fees,
  .contact,
  .gtk__inner {
    min-height: 0;
    justify-content: flex-start;
  }

  /* The rest of the gaps she flagged are decoration, not layout, and every one of
     them is sized for a wide screen.

     The gold motif between "What to bring" and the FAQ was 52 + 64 + 52 = 168px of
     the 375px column. The wave at the section's foot is a flat 92px, and .gtk has
     to hold 104px of bottom padding just to keep the last FAQ answer off it, which
     is most of the 144px before "Contact". Both are far steeper on a phone than on
     a desktop anyway, so they lose height and the padding that clears them follows. */
  .gtk__motif { height: 44px; margin: 26px 0; }
  .gtk__wave,
  .fees__wave { height: 56px; }

  /* The section paddings that used to be corrected here now live with the rest of
     the vertical rhythm, at the foot of this file. They have to: these rules are in
     a media query, which adds no specificity, so anything set here loses to the
     plain .thalia / .gtk / .contact rules that come later in the file. */
}

/* The locations card and the What to Bring column have to read as one row, so the
   card fills its column rather than stopping at its own last line. The grid already
   stretches both columns to the taller of the two; making the column a flex column
   and letting the card grow is what carries that height down into the card. */
.gtk__col { display: flex; flex-direction: column; }
.gtk__card { flex: 1; }

/* Because the card is stretched to match the What to Bring column, its contents
   have to fill it too, or they stack at the top and leave a hole underneath
   (Chenélle 2026-07-21: "this does not look good"). The two venues share the
   space equally and each centres its own lines, which lands the divider on the
   card's mid-line and reads as a deliberate split rather than slack at the foot.
   The note stays last, so it sits at the bottom of the card.

   Where the card is NOT stretched, on mobile where the columns unstack, there is
   no spare space to share and this all collapses back to the natural stacking. */
.gtk__card { display: flex; flex-direction: column; }
.venues { flex: 1; display: flex; flex-direction: column; }
.venue { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Fees and the Everything-you-need-to-know panel were the two that ran past a
   screen (by 124px and 88px at 1440x900). Their vertical rhythm is now tied to
   viewport HEIGHT, so it compresses on a short display instead of pushing the
   section over the fold, while the clamp maxima keep the original spacing on a
   tall one. Every clamp has a floor, so it tightens but never becomes cramped.

   .fees keeps a big bottom floor on purpose: its wave is 92px tall and absolutely
   positioned at the section's foot, so the copy has to stay clear of it. */
/* ---------------------------------------------------------- section rhythm

   Every section's top and bottom padding is set here, in one block, because the
   thing being tuned is not any single section but the gap BETWEEN them, and that
   gap is made of two sections' padding at once. Split across five rules they drift
   apart, which is exactly what happened: measured content-edge to content-edge at
   1440x900, the six gaps down the page ran 200, 318, 311, 411, 397 and 290px
   (Chenelle 2026-07-24: "some places it's very large, some places it's very
   small"). They now run 262, 268, 335, 335, 333, 314: a spread of 73px instead of
   211px.

   Two things stop this being simply "give every section the same padding".

   First, these sections are full-screen with their content centred, so a section's
   padding does not set its gaps directly. While the section is taller than its
   content, moving padding from bottom to top just slides the content down: it
   grows the gap above and shrinks the gap below by the same amount, a see-saw. Only
   once the padding has eaten all the slack does more padding actually add height.
   That is why Meet Thalia's two gaps sit at 262 and 268 while the rest are at 335:
   it is the section with the least slack, and pushing it further put it 33px past
   the fold, which is the one thing these numbers may not do.

   Second, the floors are set by decoration, not by taste. Waves are absolutely
   positioned at section feet and the copy has to stay clear of them: the fees wave
   is 92px, the Good-to-Know wave the same, and the yellow curve strip crosses Meet
   Thalia's top edge.

   Every value is vh-based so the whole rhythm compresses together on a short
   laptop rather than one section running past the fold. Re-measure the six gaps
   before changing any number here, and change it here rather than next to the
   section it belongs to.

   The two big top paddings are steeper than plain vh on purpose. A single vh
   coefficient that gives Meet Thalia its 232px on a 900-tall screen still asks for
   198px on a 768-tall one, and 768 is where these sections have no slack left: it
   put Meet Thalia 28px and Fees 34px past the fold. Written as a slope through two
   measured anchors instead, they give the tall screen its spacing and get out of
   the way on the short one. */
.thalia  { padding: clamp(110px, calc(52.3vh - 238px), 232px) 0 clamp(100px, 12vh, 130px); }
.styles  { padding: clamp(40px, 6.7vh, 80px) 0 clamp(100px, 13.4vh, 140px); }
.fees    { padding: clamp(60px, calc(39.4vh - 228px), 126px) 0 clamp(100px, 11.6vh, 130px); }
.gtk     { padding: clamp(72px, 11.6vh, 120px) 0 clamp(104px, 11.6vh, 120px); }
.contact { padding: clamp(32px, 5.1vh, 60px) 0 clamp(72px, 11.6vh, 120px); }

/* Stacked, the same five sections are a different problem with a much simpler
   answer. They are not full-screen here, so there is no centring and no see-saw:
   a gap really is one section's bottom padding plus the next one's top padding,
   and it can simply be set. One rhythm of 112px, and the measured gaps land at
   114, 108, 112, 167, 112, 112 against 97, 131, 155, 253, 108, 30 before.

   The 167 is Fees into Good to Know and it is at its floor already: the fees wave
   and the gold motif between the two both live in that gap and neither shrinks
   further without being clipped.

   This has to sit AFTER the rules above, not inside the earlier phone block. Media
   queries carry no extra specificity, so the desktop values would otherwise win on
   a phone purely by being later in the file, which is precisely what happened to
   .thalia once before. */
@media (max-width: 860px) {
  .thalia  { padding: 114px 0 68px; }
  .styles  { padding: 40px 0 60px; }
  .fees    { padding: 52px 0 60px; }
  .gtk     { padding: 32px 0 80px; }
  .contact { padding: 32px 0 112px; }
}

.fees__title { margin-bottom: clamp(18px, 3.2vh, 46px); }
.fees__row { padding: clamp(11px, 1.9vh, 22px) 0; }
.fees__notes { margin-top: clamp(12px, 2vh, 28px); margin-bottom: clamp(16px, 2.8vh, 40px); }

.gtk__eyebrow { margin-bottom: clamp(10px, 1.8vh, 22px); }
.gtk__sub { margin-top: clamp(12px, 2vh, 26px); }
.gtk__grid { margin-top: clamp(22px, 3.6vh, 84px); }
.gtk__card { padding: clamp(18px, 2.5vh, 34px); }
.bring { margin-top: clamp(8px, 1.6vh, 26px); }
.bring__item + .bring__item {
  margin-top: clamp(8px, 1.4vh, 22px);
  padding-top: clamp(8px, 1.4vh, 22px);
}

/* Has to sit after the rule above, not with the rest of the stacked-layout styles:
   a media query adds no specificity, so the unconditional .thalia padding would
   win wherever it came later. Those 12vh floors are sized for the wide layout's
   decorations; stacked, they cost ~194px of a phone screen that the portrait and
   the copy need. */
@media (max-width: 1024px) {
  /* The top floor is not taste, it is the yellow curve: that wave is a flat 84px
     whatever the screen, and the portrait now leads the section where only text
     used to. At 5vh the portrait cleared the curve by 1px on a 812-tall phone and
     sat 42px INSIDE it on a 667-tall one. 98px clears it with air to spare on both. */
  .thalia { padding: clamp(98px, 12vh, 128px) 0 clamp(44px, 6vh, 104px); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }


  .styles__dot { transform: none; }


  .hero__dancer--cycling { animation: none !important; opacity: 0; }
  .hero__dancer--cycling:first-child { opacity: 1; }


  .btn--glow::after { animation: none; }


  /* All three collapsible panels, not just the FAQ: the others were left in the
     tab order for half a second after closing. */
  .js .faq__panel,
  .js .styles__panel,
  .js .fees__note-panel { transition-delay: 0s !important; }


  .intro { display: none; }
}