:root { color-scheme: light; --wine: #26070b; --cream: #f4e5dc; --ink: #100b24; --sky-text: #fdf9f4; --opening-paper: #fafaff; --cloud-progress: 0; --paper-progress: 0; --font-display: 'Playfair Display', Georgia, serif; --font-text: 'Golos Text', Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: var(--opening-paper); color: var(--ink); font-family: var(--font-text); font-weight: 400; -webkit-font-smoothing: antialiased; }
body.on-clouds { background: #7798ec; }
body.dialog-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
::selection { background: #b42535; color: #fbe9de; }
.skip-link { position: fixed; z-index: 200; left: 20px; top: -70px; background: var(--cream); color: var(--ink); padding: 14px; }
.skip-link:focus { top: 16px; }
.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; color: var(--ink); transition: color .25s; pointer-events: none; }
body.on-film .site-header { color: var(--cream); }
.site-header a, .site-header button { pointer-events: auto; }
.header-brand, .dialog-brand { font-family: 'Bodoni Moda', Georgia, serif; font-size: 34px; line-height: 1; letter-spacing: -.065em; font-weight: 500; }
.header-brand { opacity: 0; }
.header-caption { font-family: var(--font-text); position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.menu-toggle, .close-navigation { display: flex; align-items: center; gap: 20px; font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.035em; padding: 12px 0 12px 12px; margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: clamp(22px, 2.8vw, 44px); margin-left: auto; }
.language-switch { display: flex; align-items: center; gap: 10px; font: 10px var(--font-text); letter-spacing: .08em; }
.language-switch button { padding: 12px 2px; opacity: .48; transition: opacity .2s; }
.language-switch button[aria-pressed='true'], .language-switch button:hover, .language-switch button:focus-visible { opacity: 1; }
.language-switch button[aria-pressed='true'] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
body.on-clouds .site-header { color: var(--sky-text); }
.intro { position: relative; height: 430dvh; }
.intro-stage { position: sticky; top: 0; width: 100%; height: 100dvh; overflow: hidden; isolation: isolate; }
.scene-base { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 110%, #eae7fa 0, #f5f5fc 34%, #fdfdfe 74%); opacity: 1; }
.scene-grain { position: absolute; z-index: 1; inset: 0; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.film-tile { position: absolute; overflow: hidden; will-change: width, height, left, top, transform, opacity; }
.film-tile video { display: block; height: 100%; width: 100%; object-fit: cover; }
.main-film { z-index: 3; left: 73%; top: 80%; width: 26vw; height: 14.625vw; transform: translate(-50%, -50%); }
.satellite { z-index: 2; transform: translate(-50%, -50%); }
.satellite-one { left: 25%; top: 19%; width: 23.5vw; height: 13.21875vw; }
.satellite-two { left: 78%; top: 22%; width: 22.5vw; height: 12.65625vw; }
.satellite-three { left: 4%; top: 50%; width: 24vw; height: 13.5vw; }
.satellite-four { left: 96%; top: 54%; width: 24vw; height: 13.5vw; }
.satellite-five { left: 23%; top: 81%; width: 24.5vw; height: 13.78125vw; }
.satellite-two video { object-position: 70% 50%; }
.film-wash { position: absolute; inset: 0; background: linear-gradient(#21040724, transparent 22%, transparent 70%, #21040730); pointer-events: none; }
.hero-wordmark { position: absolute; z-index: 4; left: 50%; top: 50%; margin: 0; color: #fff; mix-blend-mode: difference; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; font-size: min(18vw, 27svh); line-height: .85; letter-spacing: -.065em; transform: translate(-50%, -50%); transform-origin: center; will-change: transform, left, top, opacity; pointer-events: none; }
.intro-note { display: none; }
.intro-bottom { font-family: var(--font-text); position: absolute; z-index: 4; display: flex; justify-content: center; left: 4vw; right: 4vw; bottom: 24px; font-size: 10px; line-height: 1.5; letter-spacing: .07em; }
.intro-bottom > :first-child { display: none; }
.scroll-cue { display: flex; align-items: center; gap: 24px; }
.transition-glow { position: absolute; inset: 0; z-index: 5; opacity: 0; background: linear-gradient(transparent 10%, #ead9ed66 55%, #efe9ffdd); pointer-events: none; }
.bridge-copy { position: absolute; z-index: 6; top: 50%; right: 5vw; width: 39%; transform: translateY(-50%); text-align: left; color: var(--sky-text); opacity: 0; pointer-events: none; }
.eyebrow { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.bridge-copy p { font-family: var(--font-display); font-size: clamp(44px, 5.7vw, 112px); font-weight: 400; line-height: 1.09; letter-spacing: -.055em; margin: 0; }
.bridge-copy .statement-line:last-child { margin-left: .58em; }
.statement-line { display: block; }
.motion-word { display: inline-block; vertical-align: baseline; white-space: nowrap; }
.motion-char, .motion-unit { display: inline-block; }
em { font-weight: inherit; font-style: italic; }
.display-accent { font-family: var(--font-display); font-style: italic; letter-spacing: -.065em; }
.cloud-field { position: fixed; inset: 0; height: 100dvh; z-index: 0; overflow: hidden; opacity: var(--cloud-progress); background: #7798ec; pointer-events: none; }
.cloud-video { display: block; height: 100%; width: 100%; object-fit: cover; }
.cloud-shade { position: absolute; inset: 0; background: transparent; }
.portfolio-body { position: relative; z-index: 1; color: var(--sky-text); background: transparent; margin-top: calc(-1 * var(--about-overlap, 133svh)); }
h2, h3, p, figure { margin: 0; }
h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.055em; line-height: 1.04; }
/* Only the cutout's alpha sits over the continuously moving cloud film. */
.portrait-stage { position: absolute; z-index: 1; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.portrait-figure { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 82%, transparent 100%); mask-image: linear-gradient(#000 82%, transparent 100%); will-change: filter; }
.portrait-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 32% 48%; filter: drop-shadow(0 0 18px #dee6ff24); will-change: transform; }
.portrait-hair { pointer-events: none; }
.portrait-hair[hidden] { display: none !important; }
.about-section { position: relative; height: var(--about-height, 123svh); padding: 0; pointer-events: none; }
/* One portrait: the introduction and biography sit beside the moving gallery. */
.about-layout { position: sticky; top: 0; width: min(100%, 1820px); min-height: 100svh; height: auto; margin-inline: auto; padding: 112px 5vw; display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); grid-template-areas: "title reel" "bio reel"; grid-template-rows: min-content min-content; align-content: center; column-gap: clamp(40px, 5vw, 100px); row-gap: clamp(24px, 3svh, 38px); opacity: 0; }
.about-layout h2 { grid-area: title; align-self: end; font-size: clamp(62px, 6vw, 108px); line-height: 1.06; margin: 0; }
.about-greeting { font-size: .58em; line-height: 1.1; letter-spacing: -.05em; }
.about-name { white-space: nowrap; }
.reel-panel { grid-area: reel; align-self: center; min-width: 0; width: 100%; }
.portrait-reel { --visible-reels: 3; --reel-gap: clamp(16px, 1.5vw, 28px); display: flex; align-items: center; gap: var(--reel-gap); width: 100%; padding: 22px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.portrait-reel::-webkit-scrollbar { display: none; }
.reel-film { position: relative; flex: 0 0 calc((100% - 2 * var(--reel-gap)) / 3); aspect-ratio: var(--film-ratio); min-width: 0; opacity: 0; scroll-snap-align: start; --float-y: -12px; --float-tilt: -1.2deg; --float-end: 14px; --breath-time: 8s; --breath-delay: -2s; animation: reel-float 8s ease-in-out infinite alternate; animation-play-state: paused; }
.reel-film:nth-child(2n) { --float-y: 15px; --float-end: -12px; --float-tilt: 1.4deg; --breath-time: 10s; --breath-delay: -6s; animation-duration: 10s; animation-delay: -5s; }
.reel-film:nth-child(3n) { --float-y: -8px; --float-end: 16px; --float-tilt: -.9deg; --breath-time: 9s; --breath-delay: -4s; animation-duration: 9s; animation-delay: -7s; }
.reel-film:nth-child(4) { --breath-delay: -1s; animation-duration: 11s; animation-delay: -3s; }
.reel-film:nth-child(5) { --breath-delay: -7s; animation-duration: 9.5s; animation-delay: -6s; }
.reel-film:nth-child(6) { --breath-delay: -3s; animation-duration: 12s; animation-delay: -2s; }
.portrait-reel[data-running='true'] .reel-film, .portrait-reel[data-running='true'] .reel-surface { animation-play-state: running; }
@keyframes reel-float {
  from { transform: translateY(var(--float-y)) rotate(var(--float-tilt)); }
  to { transform: translateY(var(--float-end)) rotate(calc(var(--float-tilt) * -1)); }
}
/* Breathing changes the mask around the picture, never the dancer's proportions. */
.reel-surface { position: relative; width: 100%; height: 100%; overflow: hidden; transform-origin: center; transition: transform .55s cubic-bezier(.2,.7,.2,1); -webkit-mask-image: var(--reel-mask); mask-image: var(--reel-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: reel-breathe var(--breath-time) ease-in-out var(--breath-delay) infinite alternate; animation-play-state: paused; }
@keyframes reel-breathe {
  from { -webkit-mask-size: 92% 97%; mask-size: 92% 97%; -webkit-mask-position: 35% 30%; mask-position: 35% 30%; }
  to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 65% 70%; mask-position: 65% 70%; }
}
@media (hover: hover) and (pointer: fine) {
  .portrait-reel[data-running='true'] .reel-film:hover, .portrait-reel[data-running='true'] .reel-film:hover .reel-surface { animation-play-state: paused; }
  .reel-film:hover { z-index: 2; }
  .reel-film:hover .reel-surface { transform: scale(1.1); }
}
.reel-video, .reel-underlay { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reel-video { position: relative; z-index: 1; clip-path: inset(0 0 100% 0); }
.reel-underlay { position: absolute; inset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reel-external { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 100%; height: 100%; padding: 20px; border: 1px solid #fdf9f455; text-align: center; font-size: 17px; }
.reel-external > :first-child { font-size: 32px; }
.reel-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 30px; padding-top: 8px; }
.reel-count { margin-right: auto; font: 10px var(--font-text); letter-spacing: .12em; }
.reel-navigation button { padding: 8px 0; font: italic 18px var(--font-display); line-height: 1; }
.reel-navigation button:disabled { opacity: .42; cursor: default; }
.biography { grid-area: bio; align-self: start; margin: 0; max-width: 520px; }
.biography p { font-family: var(--font-text); font-size: clamp(17px, 1.05vw, 24px); line-height: 1.48; letter-spacing: -.015em; }
.biography .biography-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 1.8vw, 42px); line-height: 1.25; letter-spacing: -.045em; }
.biography p + p { margin-top: 20px; }
.formats-section { padding: clamp(42px, 6svh, 80px) clamp(32px, 5vw, 110px) 48px; width: min(100%, 2100px); margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.formats-heading { margin: 0 0 34px; }
.formats-section h2 { font-size: clamp(58px, 6.5vw, 128px); line-height: 1.07; margin: 0; }
.formats-section h2 .statement-line:last-child { margin-left: .65em; }
.format-list { border-top: 1px solid #fdf9f455; }
.format-row { border-bottom: 1px solid #fdf9f455; scroll-margin-top: 110px; }
.format-row summary { display: grid; grid-template-columns: 48px 1fr 170px 34px; align-items: center; gap: clamp(22px, 1.4vw, 30px); padding: clamp(20px, 2.2svh, 30px) 0; list-style: none; cursor: pointer; }
.format-row summary::-webkit-details-marker { display: none; }
.format-row summary:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
.format-number, .format-kind { font-family: var(--font-text); font-size: clamp(15px, .9vw, 21px); letter-spacing: .04em; }
.format-number { align-self: start; padding-top: 16px; }
.format-kind { text-align: right; }
.format-status { display: block; margin-top: 5px; font: clamp(13px, .65vw, 16px) var(--font-text); letter-spacing: .05em; opacity: .85; }
.format-row h3 { font-size: clamp(38px, 3vw, 68px); transition: transform .35s; }
.format-row summary:hover h3 { transform: translateX(8px); }
.format-mark { font-family: var(--font-text); font-weight: 400; font-size: 26px; text-align: right; transition: transform .3s; }
.format-row[open] .format-mark { transform: rotate(45deg); }
.format-description { margin: 0 0 clamp(44px, 4svh, 64px) 78px; max-width: 900px; }
.format-description p { font-family: var(--font-text); font-size: clamp(19px, 1vw, 24px); line-height: 1.48; }
.format-description-groups { max-width: 1200px; }
.format-description-groups > p:first-child { max-width: 850px; }
.group-schedule { list-style: none; margin: clamp(24px, 2.5svh, 36px) 0 0; padding: 0; border-top: 1px solid #fdf9f455; }
.group-schedule li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 36px; align-items: baseline; padding: clamp(18px, 2svh, 26px) 0; border-bottom: 1px solid #fdf9f455; font: clamp(18px, .88vw, 22px)/1.4 var(--font-text); }
.group-schedule strong { font-weight: 500; }
.group-schedule li > span { text-align: right; }
.group-location { grid-column: 2; font-size: clamp(17px, .9vw, 21px); opacity: .88; }
.format-description .format-price { margin-top: 22px; font-size: clamp(18px, .9vw, 22px); }
.format-description a { display: inline-flex; align-items: center; gap: 20px; font: italic clamp(22px, 1.05vw, 27px) var(--font-display); line-height: 1.45; margin-top: 20px; padding: 10px 0; border-bottom: 1px solid #fdf9f488; }
.closing-section { min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: clamp(180px, 24dvh, 280px) 7vw clamp(24px, 4svh, 40px); }
.footer-wordmark { font-family: 'Bodoni Moda', Georgia, serif; font-size: 35vw; font-weight: 500; line-height: .86; letter-spacing: -.065em; padding-right: .065em; }
.footer-socials { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(28px, 4vw, 75px); margin-top: clamp(16px, 3svh, 32px); font-size: 17px; }
.footer-socials a { padding-block: 8px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; transition: opacity .2s, text-decoration-thickness .2s; }
.footer-socials a:hover, .footer-socials a:focus-visible { opacity: .72; text-decoration-thickness: 2px; }
.back-to-top { position: relative; z-index: 1; display: flex; gap: 18px; align-items: center; margin-top: clamp(14px, 3svh, 32px); padding: 12px 20px; font: italic 18px var(--font-display); }
dialog { border: 0; max-width: none; max-height: none; padding: 0; }
dialog::backdrop { background: #12101bb3; backdrop-filter: blur(10px); }
.navigation-dialog { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; color: #f7f5f1; background: #18171e; padding: 0 7vw 32px; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; height: 100px; }
.close-navigation span[aria-hidden] { font-size: 27px; }
.navigation-dialog nav { display: flex; flex-direction: column; justify-content: center; height: calc(100% - 170px); padding-bottom: 30px; }
.navigation-dialog nav a { display: flex; align-items: baseline; gap: 35px; width: fit-content; padding: 8px 0; font-family: var(--font-display); font-size: clamp(43px, 6.6vw, 98px); font-weight: 400; line-height: 1.2; letter-spacing: -.06em; transition: transform .3s; }
.navigation-dialog nav a:hover { transform: translateX(12px); font-style: italic; }
.navigation-dialog nav a > span:first-child { font-family: var(--font-text); font-size: 10px; font-weight: 400; letter-spacing: 0; }
.navigation-footer { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; border-top: 1px solid #f4e5dc33; padding-top: 20px; }
@media (min-width: 701px) and (max-width: 960px) {
  .header-caption { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .about-layout { grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); column-gap: clamp(24px, 4vw, 48px); }
  .portrait-reel { --visible-reels: 2; }
  .reel-film { flex-basis: calc((100% - var(--reel-gap)) / 2); }
}
@media (max-width: 700px) {
  .site-header { height: calc(76px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6vw 0; }
  .header-brand, .dialog-brand { font-size: 28px; }
  .header-caption { display: none; }
  .header-actions { gap: 20px; }
  .language-switch { gap: 8px; font-size: 9px; }
  .menu-toggle { font-size: 19px; gap: 10px; padding-left: 0; }
  .intro { height: 380svh; }
  .hero-wordmark { font-size: 25vw; }
  .main-film { left: 75%; top: 75%; width: 43vw; height: 24.1875vw; }
  .satellite-one { left: 23%; top: 23%; width: 42vw; height: 23.625vw; }
  .satellite-two { left: 82%; top: 16%; width: 37vw; height: 20.8125vw; }
  .satellite-three { left: .5%; top: 48%; width: 30vw; height: 16.875vw; }
  .satellite-four { left: 99.5%; top: 53%; width: 30vw; height: 16.875vw; }
  .satellite-five { left: 21%; top: 80%; width: 40vw; height: 22.5vw; }
  .intro-bottom { left: 7%; right: 7%; bottom: 68px; font-size: 9px; }
  .scroll-cue { margin-inline: auto; gap: 15px; }
  .bridge-copy { top: auto; right: auto; left: 7%; width: 86%; bottom: 12%; transform: none; }
  .bridge-copy p { font-size: clamp(39px, 10vw, 64px); line-height: 1.08; }
  .bridge-copy .statement-line { display: inline; }
  .bridge-copy .statement-line::after { content: ' '; }
  .bridge-copy .statement-line:last-child { display: block; margin-left: .55em; }
  .cloud-video { object-position: 48% center; }
  .portrait-figure { inset: auto 0 auto; top: max(76px, 9svh); height: min(64svh, 112vw); -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
  .portrait-stage img { object-position: 9% center; transform-origin: 48% 42%; filter: drop-shadow(0 0 12px #dee6ff1f); }
  .about-layout { height: auto; min-height: 100dvh; padding: 80px 6vw 22px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "title" "reel" "bio"; align-content: center; gap: 12px; }
  .about-layout h2 { font-size: clamp(36px, 9vw, 48px); line-height: 1.12; margin: 0; }
  .about-layout h2 .statement-line { display: inline; }
  .reel-panel { width: min(100%, calc(clamp(132px, 29dvh, 240px) * 1.6875 + 24px)); justify-self: center; }
  .portrait-reel { --visible-reels: 3; --reel-gap: 12px; padding: 14px 0; }
  .reel-film { flex-basis: calc((100% - 2 * var(--reel-gap)) / 3); --float-y: -8px; --float-end: 8px; }
  .reel-film:nth-child(2n) { --float-y: 9px; --float-end: -8px; }
  .reel-film:nth-child(3n) { --float-y: -6px; --float-end: 10px; }
  .reel-external { padding: 8px; font-size: 13px; }
  .reel-navigation { gap: 24px; padding-top: 0; }
  .reel-navigation button { font-size: 16px; }
  .biography { display: block; margin: 0; max-width: none; }
  .biography p { font-size: clamp(14px, 3.65vw, 16px); line-height: 1.4; }
  .biography .biography-lead { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.24; }
  .biography p + p { margin-top: 12px; }
  .formats-section { min-height: 0; padding: 42px 6vw 35px; }
  .formats-heading { margin: 0 0 26px; }
  .formats-section h2 { font-size: clamp(42px, 11vw, 68px); margin: 0; }
  .formats-section h2 .statement-line:last-child { margin-left: .5em; }
  .format-row { scroll-margin-top: 85px; }
  .format-row summary { grid-template-columns: 19px 1fr 23px; gap: 12px; padding: 19px 0; }
  .format-number { padding-top: 8px; font-size: 12px; }
  .format-row h3 { font-size: clamp(30px, 7.5vw, 45px); }
  .format-kind { display: none; }
  .format-row:has(.format-status) .format-kind { display: block; grid-column: 2; grid-row: 2; text-align: left; font-size: 14px; margin-top: -8px; }
  .format-row:has(.format-status) .format-mark { grid-column: 3; grid-row: 1; }
  .format-status { display: inline; margin: 0 0 0 10px; font-size: 12px; }
  .format-mark { font-size: 22px; }
  .format-description { margin: 0 0 30px 31px; }
  .format-description p { font-size: 17px; }
  .group-schedule li { grid-template-columns: 1fr; gap: 3px; padding: 15px 0; font-size: 16px; }
  .group-schedule li > span { text-align: left; }
  .group-location { grid-column: 1; font-size: 14px; }
  .format-description .format-price { font-size: 16px; }
  .format-description a { font-size: 20px; gap: 12px; }
  .closing-section { min-height: 100svh; min-height: 100dvh; padding: clamp(180px, 24dvh, 240px) 7vw 45px; }
  .footer-wordmark { font-size: 36vw; }
  .footer-socials { gap: 20px; font-size: 17px; margin-top: 28px; }
  .back-to-top { margin-top: 28px; }
  .dialog-header { height: 76px; }
  .navigation-dialog nav { height: calc(100% - 155px); }
  .navigation-dialog nav a { font-size: 12vw; gap: 18px; padding-block: 12px; }
  .navigation-dialog nav a > span:first-child { font-size: 8px; }
  .navigation-footer { font-size: 10px; }

}
@media (max-width: 700px) and (max-height: 700px) {
  .about-layout { padding-top: 76px; padding-bottom: 18px; gap: 10px; }
  .about-layout h2 { font-size: clamp(34px, 8.5vw, 42px); }
  .reel-panel { width: min(100%, calc(clamp(112px, calc(100dvh - 382px), 210px) * 1.6875 + 24px)); }
  .biography p { font-size: 14px; }
  .biography .biography-lead { font-size: 18px; }
  .biography p + p { margin-top: 10px; }
}
@media (max-width: 700px) and (max-height: 540px) and (orientation: landscape) {
  .portrait-figure { inset: 0; height: auto; }
  .portrait-stage img { object-position: center; transform-origin: 32% 48%; }
  .bridge-copy { top: 50%; right: 5%; bottom: auto; left: auto; width: 36%; transform: translateY(-50%); }
  .bridge-copy p { font-size: clamp(30px, 5.8vw, 42px); line-height: 1.04; }
  .bridge-copy .statement-line { display: block; }
  .bridge-copy .statement-line:last-child { margin-left: 0; }
}
@media (max-height: 540px) and (min-width: 701px) {
  .site-header, .dialog-header { height: 70px; }
  .hero-wordmark { font-size: min(18vw, 26svh); }
  .intro-bottom { bottom: 18px; }
  .bridge-copy p { font-size: 14vh; }
  .about-layout { padding-top: 82px; padding-bottom: 40px; row-gap: 20px; }
  .about-layout h2 { font-size: 9svh; }
  .biography p { font-size: 17px; }
  .formats-section { padding-top: 42px; padding-bottom: 24px; }
  .closing-section { padding-top: 76px; padding-bottom: 16px; }
  .footer-wordmark { font-size: min(35vw, 28svh); }
  .footer-socials { margin-top: 12px; font-size: 17px; }
  .footer-socials a { padding-block: 4px; }
  .back-to-top { margin-top: 8px; padding-block: 4px; }
  .navigation-dialog nav { height: calc(100% - 125px); }
  .navigation-dialog nav a { font-size: 10vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
  .intro { height: 250dvh; }
  .satellite { display: none; }
  .format-row summary:hover h3 { transform: none; }
  .reel-video { animation: none; }
}

.formats-section { scroll-margin-top: 64px; }
@media (max-width: 700px) { .formats-section { scroll-margin-top: 40px; } }

/* Six gently feathered silhouettes, keeping the centre of each dance frame open. */
.reel-film[data-position="1"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M12%20126C12%2051%2085%2010%20180%2010S348%2051%20348%20126V601Q348%20630%20320%20630H40Q12%20630%2012%20601Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
.reel-film[data-position="2"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M64%2010H276Q348%2010%20348%2085V529Q348%20630%20241%20630H44Q12%20630%2012%20597V65Q12%2010%2064%2010Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
.reel-film[data-position="3"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M48%2012C115%205%20239%2010%20301%2022Q351%2032%20350%2093L340%20553Q338%20629%20264%20630H80Q12%20630%2013%20558L9%2090Q8%2020%2048%2012Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
.reel-film[data-position="4"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M105%2010H321Q349%2010%20349%2039V510Q349%20630%20238%20630H40Q11%20630%2011%20600V126Q11%2010%20105%2010Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
.reel-film[data-position="5"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M40%2010H320Q348%2010%20348%2040V514C348%20586%20280%20630%20180%20630S12%20586%2012%20514V40Q12%2010%2040%2010Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
.reel-film[data-position="6"] { --reel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20360%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.6%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d%3D%22M92%2011H257Q348%2011%20348%2099V578Q348%20629%20296%20629H108Q12%20629%2012%20532V90Q12%2011%2092%2011Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23soft%29%22/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .reel-film, .reel-surface { animation: none; } .reel-surface { transition: none; } }