:root {
  --ink: #0a0a0a;
  --surface: #171717;
  --paper: #f2f2f2;
  --white: #ffffff;
  --muted: #a8a8a8;
  --line: #5e5e5e;
  --page: min(calc(100% - 96px), 1440px);
  --space-section: clamp(52px, 6vw, 84px);
  --motion-instant: 100ms;
  --motion-fast: 160ms;
  --motion-reveal: 260ms;
  --motion-section: 420ms;
  --motion-hero: 680ms;
  --motion-stagger-tight: 40ms;
  --motion-stagger: 60ms;
  --motion-distance-xs: 4px;
  --motion-distance-sm: 12px;
  --motion-distance-md: 24px;
  --motion-ease: ease-out;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; overflow-x: hidden; color: var(--paper); background: var(--ink); font-family: Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 40; top: 12px; left: 12px; padding: 12px 16px; color: var(--ink); background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.brand { position: absolute; z-index: 30; top: 6px; left: max(48px, calc((100vw - 1440px) / 2)); width: 84px; height: 84px; overflow: hidden; mix-blend-mode: screen; }
.brand img, .hero-logo, .about-frame img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 136px 1fr 136px; width: var(--page); min-height: 96px; margin-inline: auto; align-items: center; border-bottom: 1px solid rgba(255,255,255,.35); }
.header-line { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: rgba(255,255,255,.7); transform-origin: left; }
.desktop-nav { grid-column: 2; display: flex; margin-right: 32px; justify-content: flex-end; justify-self: end; gap: 32px; }
.desktop-nav a, .mobile-menu a { position: relative; min-height: 44px; display: grid; place-items: center; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; transition: color var(--motion-fast) var(--motion-ease); }
.desktop-nav a::after, .mobile-menu a::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--motion-ease); }
.desktop-nav a:hover, .mobile-menu a:hover { color: var(--white); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a.is-active::after, .mobile-menu a:hover::after, .mobile-menu a:focus-visible::after, .mobile-menu a.is-active::after { transform: scaleX(1); }
.desktop-nav a.is-active, .mobile-menu a.is-active { color: var(--paper); }
.header-cta { grid-column: 3; min-width: 104px; min-height: 48px; display: grid; justify-self: end; place-items: center; color: var(--ink); background: var(--white); font-size: .75rem; font-weight: 700; text-transform: uppercase; transition: transform var(--motion-fast) var(--motion-ease); }
.header-cta:hover { transform: translateY(-2px); }
.header-cta:active { transform: translateY(1px); transition-duration: var(--motion-instant); }
.menu-toggle, .mobile-menu { display: none; }
.menu-toggle { position: relative; z-index: 30; grid-column: 3; width: 48px; height: 48px; padding: 12px; border: 1px solid rgba(255,255,255,.7); color: var(--white); background: var(--ink); opacity: 1; visibility: visible; }
.menu-toggle svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.mobile-menu[hidden] { display: none; }

.hero { position: relative; min-height: min(100dvh, 960px); overflow: hidden; }
.hero-media, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; object-position: center 62%; }
.hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.hero-logo { position: absolute; z-index: 2; top: 30%; left: 50%; width: clamp(280px, 38vw, 560px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }

.section { width: var(--page); margin: 0 auto; padding: var(--space-section) 0; }
.section-marker { margin: 0 0 52px; color: var(--muted); font-size: .875rem; font-weight: 700; text-transform: uppercase; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 76px); }
.scenario { min-width: 0; }
.scenario-content { max-width: 420px; }
.scenario h3 { margin: 0 0 18px; font-size: 1rem; line-height: 1.2; text-transform: uppercase; }
.scenario p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.7; text-wrap: pretty; }

.about { border-bottom: 1px solid var(--line); }
.about-frame { display: grid; grid-template-columns: minmax(280px, .62fr) 1fr; min-height: 520px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-frame > img { width: min(100%, 440px); aspect-ratio: 1; align-self: center; justify-self: center; transform-origin: center; }
.about-copy { display: flex; padding: clamp(44px, 6vw, 84px); flex-direction: column; justify-content: center; border-left: 1px solid var(--line); gap: 24px; }
.about-copy p { max-width: 720px; margin: 0; font-size: clamp(.95rem, 1.25vw, 1.125rem); line-height: 1.75; text-wrap: pretty; }

.members { width: 100%; max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 84px 20px; }
.member { transform-origin: center; }
.member-featured { grid-column: 1 / -1; }
.member-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); }
.member-featured .member-photo { aspect-ratio: 16 / 9; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.member-photo-singers img { object-position: center 42%; }
.member-photo-lada img { object-position: center 48%; }
.member-photo-mates img { object-position: center 38%; }
.member-photo-robin img { object-position: center 40%; }
.member-photo-robin-2 img { object-position: 48% center; }
.member-caption { min-height: 84px; padding-top: 16px; }
.member-caption-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.member-name, .member-role { margin: 0; font-size: .875rem; font-weight: 700; text-transform: uppercase; }
.member-role { min-height: 20px; margin-top: 8px; color: var(--muted); }

.events-list { display: grid; grid-template-columns: 1fr; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.events-header { display: none; }
.event-row { display: grid; grid-template-columns: 64px minmax(0, 1.35fr) minmax(80px, .65fr); align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-top: 1px solid var(--line); transform-origin: center; }
.event-empty { grid-template-columns: 64px minmax(0, 1fr); grid-column: 1 / -1; min-height: 136px; border-left: 0; }
.event-date { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; }
.event-row p { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; text-wrap: pretty; }
.event-row .event-place { font-size: .75rem; font-weight: 400; }
.contact { display: grid; grid-template-columns: minmax(140px, .38fr) minmax(0, 1.62fr); overflow-x: hidden; gap: clamp(32px, 6vw, 84px); padding: var(--space-section) max(48px, calc((100vw - 1440px) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--paper); background: var(--ink); }
.contact .section-marker { margin: 0; color: var(--muted); }
.contact-form { width: 100%; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; gap: 32px 28px; }
.field { position: relative; margin: 0; }
.field::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--paper); content: ""; transform: scaleX(0); transform-origin: left; }
.field label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 52px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; color: var(--paper); background-color: transparent; color-scheme: dark; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 8px center; background-repeat: no-repeat; background-size: 18px 18px; }
.field select option { color: var(--ink); background: var(--paper); }
.field textarea { min-height: 132px; padding-top: 14px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--paper); outline-offset: 4px; }
.field:focus-within label { color: var(--paper); }
.field:focus-within::after { transform: scaleX(1) scaleY(2); transition: transform var(--motion-fast) var(--motion-ease); }
.field input::placeholder { color: var(--muted); opacity: 1; }
.date-field { z-index: 5; }
.date-picker-trigger { width: 100%; min-height: 52px; display: flex; padding: 10px 0; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-bottom: 1px solid var(--line); color: var(--paper); background: transparent; cursor: pointer; text-align: left; }
.date-picker-trigger svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.date-picker-trigger:not(.has-value) span { color: var(--muted); }
.date-picker-trigger:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.date-picker-trigger[aria-expanded="true"] { border-bottom-color: var(--paper); }
.date-picker { position: absolute; z-index: 10; top: calc(100% + 12px); left: 0; width: min(360px, calc(100vw - 40px)); padding: 16px; border: 1px solid var(--line); color: var(--paper); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.date-picker[hidden] { display: none; }
.date-picker-header { min-height: 44px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.date-picker-header p { margin: 0; font-size: .875rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.date-picker-nav { width: 44px; height: 44px; display: grid; padding: 0; place-items: center; border: 0; color: var(--paper); background: transparent; cursor: pointer; }
.date-picker-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.date-picker-nav:hover, .date-picker-nav:focus-visible { background: var(--ink); }
.date-picker-nav:disabled { color: var(--line); cursor: not-allowed; }
.date-picker-weekdays, .date-picker-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-picker-weekdays { margin-top: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.date-picker-weekdays span { min-height: 32px; display: grid; place-items: center; }
.date-picker-day, .date-picker-blank { aspect-ratio: 1; }
.date-picker-day { min-width: 0; display: grid; padding: 0; place-items: center; border: 0; color: var(--paper); background: transparent; cursor: pointer; font-size: .8rem; font-variant-numeric: tabular-nums; }
.date-picker-day:hover, .date-picker-day:focus-visible { outline: 1px solid var(--paper); outline-offset: -3px; }
.date-picker-day.is-today { border: 1px solid var(--line); }
.date-picker-day.is-selected { color: var(--ink); background: var(--paper); }
.date-picker-day:disabled { color: var(--line); cursor: not-allowed; }
.date-picker-day:disabled:hover { outline: 0; }
.field-full { grid-column: 1 / -1; }
.turnstile-field { min-height: 0; }
.turnstile-field p { margin: 0; color: var(--muted); font-size: .75rem; }
.form-message { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); }
.form-message[hidden] { display: none; }
.form-message.is-success { border-color: var(--paper); }
.form-message p { margin: 0; line-height: 1.5; }
.form-message a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-message button { min-width: 80px; min-height: 44px; border: 1px solid var(--line); color: var(--paper); background: transparent; cursor: pointer; }
.required-marker { color: var(--paper); }
.required-note { grid-column: 1; margin: 0; align-self: center; color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.submit-button { grid-column: 2; min-width: 168px; min-height: 52px; display: grid; justify-self: end; padding: 0 28px; place-items: center; border: 0; color: var(--ink); background: var(--paper); cursor: pointer; font-size: .75rem; font-weight: 700; text-transform: uppercase; transition: transform var(--motion-instant) var(--motion-ease); }
.submit-button:active { transform: translateY(2px); }
.submit-button:disabled { opacity: .55; cursor: wait; transform: none; }

footer { width: var(--page); min-height: 300px; margin: 0 auto; padding: 52px 0; border-top: 1px solid var(--line); }
.footer-info { width: min(100%, 840px); display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(240px, 1fr); margin-inline: auto; gap: 24px 52px; }
.footer-travel, .footer-contact { margin: 0; color: var(--paper); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.footer-travel { grid-column: 1; grid-row: 1; max-width: 520px; }
.footer-travel > span, .footer-contact > span { display: block; margin-bottom: 12px; color: var(--muted); font-size: .875rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.footer-contact { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; font-style: normal; }
.footer-contact > strong { font-size: 1rem; }
.footer-detail { min-height: 56px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--paper); transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.footer-email { grid-column: 1; grid-row: 2; }
.footer-phone { grid-column: 2; grid-row: 2; }
.footer-detail > span { color: var(--muted); font-size: .875rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; transition: color var(--motion-fast) var(--motion-ease); }
.footer-detail > strong { min-width: 0; font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.footer-detail:hover { color: var(--ink); background: var(--paper); }
.footer-detail:hover > span { color: var(--ink); }
.footer-detail:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--white); outline-offset: 3px; }
.footer-socials { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-social { min-height: 52px; display: flex; padding: 0 16px; align-items: center; gap: 12px; border-right: 1px solid var(--line); color: var(--paper); }
.footer-social:last-child { border-right: 0; }
.footer-social[aria-disabled="true"] { color: var(--muted); }
.footer-social[href] { transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.footer-social[href]:hover { color: var(--ink); background: var(--paper); }
.footer-social svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.footer-social .fill { fill: currentColor; stroke: none; }
.footer-social small { font-size: .875rem; font-weight: 700; text-transform: uppercase; }

.gallery-page { padding-top: 96px; }
.gallery-section { width: var(--page); margin: 0 auto; padding: var(--space-section) 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gallery-item, .gallery-item-wide { grid-column: auto; aspect-ratio: 1; overflow: hidden; margin: 0; background: var(--surface); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery-item img:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.gallery-item-portrait img { object-position: center 28%; }
.viewer-container { font-family: Arial, sans-serif; }
.viewer-backdrop { background-color: rgba(10,10,10,.96); }
.viewer-title { display: none; }
.viewer-toolbar > ul > .viewer-download::before { width: 20px; height: 20px; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M5 21h14'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 18px 18px; content: ""; }

.repertoire-page { padding-top: 96px; }
.repertoire-section { width: var(--page); min-height: 560px; margin: 0 auto; padding: var(--space-section) 0; }
.repertoire-content { width: min(100%, 1040px); margin-inline: auto; }
.repertoire-content h1 { margin: 0 0 20px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: balance; }
.repertoire-intro { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: 1rem; line-height: 1.6; text-align: center; text-wrap: pretty; }
.repertoire-tools { width: min(100%, 800px); margin: 44px auto 0; }
.repertoire-search { min-height: 60px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px; padding: 0 12px 0 20px; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--surface); }
.repertoire-search > svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.repertoire-search input { width: 100%; min-width: 0; height: 58px; padding: 0; border: 0; outline: 0; color: var(--paper); background: transparent; font-size: 1rem; }
.repertoire-search input::placeholder { color: var(--muted); opacity: 1; }
.repertoire-search input::-webkit-search-cancel-button { display: none; }
.repertoire-search:focus-within { border-color: var(--paper); }
.repertoire-search-clear { width: 40px; height: 40px; display: grid; padding: 10px; place-items: center; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.repertoire-search-clear[hidden] { display: none; }
.repertoire-search-clear:hover { color: var(--paper); }
.repertoire-search-clear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.repertoire-filters { display: flex; margin-top: 20px; justify-content: center; flex-wrap: wrap; gap: 8px; }
.repertoire-filter { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 700; text-transform: uppercase; transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.repertoire-filter span { margin-left: 6px; color: inherit; opacity: .7; }
.repertoire-filter:hover { color: var(--paper); border-color: var(--paper); }
.repertoire-filter.is-active { color: var(--ink); border-color: var(--paper); background: var(--paper); }
.repertoire-results { margin: 18px 0 0; color: var(--muted); font-size: .75rem; text-align: center; text-transform: uppercase; }
.repertoire-groups { display: grid; margin-top: 52px; gap: 64px; }
.repertoire-group[hidden], .song-list p[hidden] { display: none; }
.repertoire-group h2 { margin: 0 0 20px; color: var(--muted); font-size: .875rem; text-align: center; text-transform: uppercase; }
.song-list { border-top: 1px solid var(--line); }
.song-list p { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr); margin: 0; padding: 12px 16px; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.song-list span { font-size: .95rem; font-weight: 700; }
.song-list small { color: var(--muted); font-size: .875rem; }
.repertoire-empty { margin: 64px 0 0; color: var(--muted); text-align: center; }
.repertoire-empty[hidden] { display: none; }
.repertoire-cta { min-width: 168px; min-height: 52px; display: grid; width: max-content; margin: 44px auto 0; padding: 0 28px; place-items: center; color: var(--ink); background: var(--paper); font-size: .75rem; font-weight: 700; text-transform: uppercase; }

.motion-enabled [data-motion="header-brand"][data-motion-state="idle"],
.motion-enabled [data-motion="nav-item"][data-motion-state="idle"],
.motion-enabled [data-motion="hero-logo"][data-motion-state="idle"] { opacity: 0; }
.motion-enabled .site-header { border-bottom-color: transparent; }
.motion-enabled [data-motion="header-line"][data-motion-state="idle"] { transform: scaleX(0); }
.motion-enabled [data-motion="section-label"] { transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease); }
.motion-enabled [data-motion="section-label"][data-motion-state="idle"] { opacity: 0; transform: translateY(var(--motion-distance-sm)); }
.motion-enabled [data-motion="section-label"][data-motion-state="running"] { will-change: opacity, transform; }
.motion-enabled [data-motion="section-label"][data-motion-state="running"],
.motion-enabled [data-motion="section-label"][data-motion-state="done"] { opacity: 1; transform: translateY(0); }

.motion-enabled [data-motion="panel-group"] [data-motion-item] .scenario-content { opacity: 0; transform: translateY(var(--motion-distance-sm)); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item] .scenario-content,
.motion-enabled [data-motion="panel-group"][data-motion-state="done"] [data-motion-item] .scenario-content { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item] .scenario-content { will-change: opacity, transform; transition: opacity var(--motion-reveal) var(--motion-ease) calc(var(--motion-delay, 0ms) + 120ms), transform var(--motion-reveal) var(--motion-ease) calc(var(--motion-delay, 0ms) + 120ms); }

.motion-enabled [data-motion="about"] > img { opacity: 0; transform: translateX(calc(-1 * var(--motion-distance-md))); }
.motion-enabled [data-motion="about"] .about-copy { opacity: 0; transform: translateX(var(--motion-distance-md)); }
.motion-enabled [data-motion="about"][data-motion-state="running"] > img,
.motion-enabled [data-motion="about"][data-motion-state="done"] > img { opacity: 1; transform: translateX(0); }
.motion-enabled [data-motion="about"][data-motion-state="running"] .about-copy,
.motion-enabled [data-motion="about"][data-motion-state="done"] .about-copy { opacity: 1; transform: translateX(0); }
.motion-enabled [data-motion="about"][data-motion-state="running"] > img { will-change: opacity, transform; transition: opacity var(--motion-section) var(--motion-ease), transform var(--motion-section) var(--motion-ease); }
.motion-enabled [data-motion="about"][data-motion-state="running"] .about-copy { will-change: opacity, transform; transition: opacity var(--motion-section) var(--motion-ease) 80ms, transform var(--motion-section) var(--motion-ease) 80ms; }

.motion-enabled [data-motion="member-group"] [data-motion-item] { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.motion-enabled [data-motion="member-group"][data-motion-state="running"] [data-motion-item],
.motion-enabled [data-motion="member-group"][data-motion-state="done"] [data-motion-item] { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="member-group"][data-motion-state="running"] [data-motion-item] { will-change: opacity, transform; transition: opacity var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms), transform var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms); }

.motion-enabled [data-motion="event-list"] [data-motion-item] { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.motion-enabled [data-motion="event-list"][data-motion-state="running"] [data-motion-item],
.motion-enabled [data-motion="event-list"][data-motion-state="done"] [data-motion-item] { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="event-list"][data-motion-state="running"] [data-motion-item] { will-change: opacity, transform; transition: opacity var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms), transform var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms); }

.motion-enabled [data-motion="contact-form"] [data-motion-item] { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.motion-enabled [data-motion="contact-form"][data-motion-state="running"] [data-motion-item],
.motion-enabled [data-motion="contact-form"][data-motion-state="done"] [data-motion-item] { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="contact-form"][data-motion-state="running"] [data-motion-item] { will-change: opacity, transform; transition: opacity var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms), transform var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms); }
.motion-enabled [data-motion="contact-form"][data-motion-state="running"] .field::after,
.motion-enabled [data-motion="contact-form"][data-motion-state="done"] .field::after { transform: scaleX(1); }
.motion-enabled [data-motion="contact-form"][data-motion-state="running"] .field::after { will-change: transform; transition: transform var(--motion-reveal) var(--motion-ease) calc(var(--motion-delay, 0ms) + 80ms); }

.motion-enabled [data-motion="footer"] [data-motion-item] { opacity: 0; transform: translateY(var(--motion-distance-sm)); }
.motion-enabled [data-motion="footer"][data-motion-state="running"] [data-motion-item],
.motion-enabled [data-motion="footer"][data-motion-state="done"] [data-motion-item] { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="footer"][data-motion-state="running"] [data-motion-item] { will-change: opacity, transform; transition: opacity var(--motion-reveal) var(--motion-ease) var(--motion-delay, 0ms), transform var(--motion-reveal) var(--motion-ease) var(--motion-delay, 0ms); }

.motion-enabled [data-motion-state="done"],
.motion-enabled [data-motion-state="done"] *,
.motion-enabled [data-motion-state="done"] *::after { will-change: auto; }

@media (max-width: 1023px) {
  :root { --page: calc(100% - 64px); }
  .brand { left: 32px; width: 72px; height: 72px; }
  .site-header { min-height: 84px; grid-template-columns: 104px 1fr 112px; }
  .about-frame { min-height: 440px; }
  .about-copy { padding: 52px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 20px; }
  .event-row { grid-template-columns: 58px minmax(0, 1.35fr) minmax(72px, .65fr); gap: 10px; }
  .event-empty { grid-template-columns: 58px minmax(0, 1fr); }
  .contact { padding-inline: 32px; gap: 48px; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 40px); }
  .brand { top: 4px; left: 20px; width: 64px; height: 64px; }
  .site-header { min-height: 72px; grid-template-columns: 72px 1fr 80px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: grid; place-items: center; justify-self: end; }
  .mobile-menu { position: absolute; top: 72px; right: 0; left: 0; display: grid; padding: 16px 20px 20px; border-bottom: 1px solid rgba(255,255,255,.5); background: var(--ink); }
  .mobile-menu a { min-height: 56px; justify-items: start; border-bottom: 1px solid var(--line); font-size: .875rem; }
  .mobile-menu a:last-child { border-bottom: 0; color: var(--white); }
  .mobile-menu a::after { display: none; }
  .hero { min-height: 780px; }
  .hero-photo { top: 72px; height: calc(100% - 72px); object-position: 53% center; }
  .hero-logo { top: 18%; left: 50%; width: min(52vw, 200px); }
  .scenario-grid, .about-frame, .contact { grid-template-columns: 1fr; }
  .scenario-grid { gap: 44px; }
  .about-frame { min-height: auto; }
  .about-frame > img { width: min(80vw, 360px); }
  .about-copy { padding: 40px 24px; border-top: 1px solid var(--line); border-left: 0; }
  .members { gap: 52px 12px; }
  .member-featured .member-photo { aspect-ratio: 4 / 3; }
  .member-caption { min-height: 84px; padding-top: 12px; }
  .member-caption-duo { gap: 12px; }
  .motion-enabled [data-motion="member-group"][data-motion-state="idle"] .member-featured { transform: translateY(var(--motion-distance-md)) rotate(-4deg); }
  .motion-enabled [data-motion="member-group"][data-motion-state="idle"] .member:nth-child(even) { transform: translateY(var(--motion-distance-md)) rotate(-8deg); }
  .motion-enabled [data-motion="member-group"][data-motion-state="idle"] .member:nth-child(odd):not(.member-featured) { transform: translateY(var(--motion-distance-md)) rotate(8deg); }
  .events-list { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 56px minmax(0, 1fr) minmax(72px, .65fr); gap: 10px; min-height: 48px; padding-inline: 12px; border-left: 0; }
  .event-empty { grid-template-columns: 56px minmax(0, 1fr); min-height: 136px; }
  .contact { padding: var(--space-section) 20px; }
  .contact-form { grid-template-columns: 1fr; gap: 28px; }
  .field-full, .required-note { grid-column: 1; }
  .submit-button { grid-column: 1; width: 100%; justify-self: stretch; }
  footer { min-height: 440px; padding: 52px 0; }
  .footer-info { grid-template-columns: 1fr; margin-left: 0; gap: 24px; }
  .footer-travel, .footer-email, .footer-contact, .footer-phone { grid-column: 1; grid-row: auto; }
  .footer-socials { grid-column: 1; grid-template-columns: 1fr; }
  .footer-social { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-social:last-child { border-bottom: 0; }
  .gallery-page { padding-top: 72px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery-item, .gallery-item-wide { grid-column: auto; aspect-ratio: 1; }
  .repertoire-page { padding-top: 72px; }
  .repertoire-section { min-height: 480px; }
  .repertoire-content h1 { margin-bottom: 16px; font-size: 1.5rem; }
  .repertoire-intro { font-size: .875rem; }
  .repertoire-tools { margin-top: 32px; }
  .repertoire-search { min-height: 56px; padding-left: 16px; }
  .repertoire-search input { height: 54px; font-size: .875rem; }
  .repertoire-filters { justify-content: stretch; }
  .repertoire-filter { flex: 1 1 calc(50% - 4px); padding-inline: 10px; }
  .repertoire-groups { margin-top: 40px; gap: 52px; }
  .song-list p { grid-template-columns: 1fr; padding: 14px 8px; gap: 6px; }
  .repertoire-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav a, .desktop-nav a::after, .mobile-menu a, .mobile-menu a::after, .header-cta, .submit-button, .field:focus-within::after { transition: none; }
  .motion-enabled [data-motion],
  .motion-enabled [data-motion-item],
  .motion-enabled [data-motion] *,
  .motion-enabled [data-motion] *::after { opacity: 1; transition: none; will-change: auto; }
  .motion-enabled [data-motion="hero-logo"] { transform: translate(-50%, -50%); }
  .motion-enabled [data-motion="header-line"],
  .motion-enabled [data-motion="contact-form"] .field::after { transform: scaleX(1); }
  .motion-enabled [data-motion="section-label"],
  .motion-enabled [data-motion="about"] > img,
  .motion-enabled [data-motion="about"] .about-copy,
  .motion-enabled [data-motion="member-group"] [data-motion-item],
  .motion-enabled [data-motion="event-list"] [data-motion-item],
  .motion-enabled [data-motion="contact-form"] [data-motion-item],
  .motion-enabled [data-motion="footer"] [data-motion-item] { transform: none; }
}