: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, 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, .footer-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; }
nav { grid-column: 2; display: flex; justify-content: center; gap: 32px; }
nav 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); }
nav 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); }
nav a:hover { color: var(--white); }
nav a:hover::after, nav a:focus-visible::after, nav a.is-active::after { transform: scaleX(1); }
nav 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); }

.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, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scenario { position: relative; min-height: 420px; display: flex; overflow: hidden; padding: 32px; flex-direction: column; align-items: flex-start; justify-content: flex-end; border-right: 1px solid var(--line); transform-origin: center bottom; }
.scenario:last-child { border-right: 0; }
.scenario-invert { color: var(--ink); background: var(--paper); }
.scenario p { position: relative; z-index: 2; margin: 0; font-size: .875rem; font-weight: 700; text-transform: uppercase; }
.scenario::after { position: absolute; z-index: 1; inset: 0; background: var(--paper); content: ""; pointer-events: none; transform: scaleY(0); transform-origin: top; }
.scenario-invert::after { background: var(--ink); }

.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; }
.layout-lines { display: flex; padding: 84px; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); gap: 24px; }
.layout-lines i { display: block; width: 100%; height: 1px; background: var(--line); transform-origin: left; }
.layout-lines i:nth-child(2) { width: 84%; }
.layout-lines i:nth-child(3) { width: 92%; }
.layout-lines i:nth-child(4) { width: 68%; }
.layout-lines i:nth-child(5) { width: 44%; }

.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-photo::after { position: absolute; inset: 0; background: var(--paper); content: ""; pointer-events: none; transform: scaleY(0); transform-origin: top; }
.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 { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.events-header, .event-row { display: grid; grid-template-columns: 136px minmax(0, 1.618fr) minmax(160px, 1fr); align-items: center; gap: 24px; }
.event-empty { grid-template-columns: 136px minmax(0, 1fr); }
.events-header { min-height: 52px; padding: 0 24px; color: var(--muted); font-size: .875rem; font-weight: 700; text-transform: uppercase; }
.event-row { min-height: 136px; padding: 24px; border-top: 1px solid var(--line); transform-origin: center; }
.event-date { color: var(--muted); font-size: clamp(2rem, 4vw, 3.25rem); font-variant-numeric: tabular-nums; line-height: 1; }
.event-row p { margin: 0; font-size: 1rem; font-weight: 700; text-transform: uppercase; text-wrap: pretty; }
.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)); color: var(--ink); background: var(--paper); }
.contact .section-marker { margin: 0; color: #555; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; gap: 20px 24px; }
.field-row { display: contents; }
.field { position: relative; margin: 0; }
.field::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--ink); content: ""; transform: scaleX(0); transform-origin: left; }
.field label { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.field input, .field textarea { width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid #777; border-radius: 0; padding: 8px 0; color: var(--ink); background: transparent; resize: vertical; }
.field textarea { min-height: 88px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--ink); outline-offset: 4px; }
.field:focus-within::after { transform: scaleX(1) scaleY(2); transition: transform var(--motion-fast) var(--motion-ease); }
.submit-button { grid-column: 2; min-width: 104px; min-height: 48px; display: grid; justify-self: end; padding: 0 20px; place-items: center; border: 0; color: var(--white); background: var(--ink); 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); }

footer { width: var(--page); min-height: 180px; display: flex; margin: 0 auto; align-items: center; justify-content: space-between; }
.footer-brand { width: 104px; height: 80px; overflow: hidden; mix-blend-mode: screen; }
.footer-brand img { mix-blend-mode: normal; }
.social-placeholders { display: flex; gap: 24px; }
.social-placeholders > span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.social-placeholders svg { width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; fill: none; stroke: var(--paper); stroke-width: 1.5; }
.social-placeholders small { font-size: .7rem; text-transform: uppercase; }
.social-placeholders .fill { fill: var(--paper); stroke: none; }

.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]::after { transform: scaleY(1); }
.motion-enabled [data-motion="panel-group"] [data-motion-item] p { opacity: 0; transform: translateY(var(--motion-distance-sm)); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item]::after,
.motion-enabled [data-motion="panel-group"][data-motion-state="done"] [data-motion-item]::after { transform: scaleY(0); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item] p,
.motion-enabled [data-motion="panel-group"][data-motion-state="done"] [data-motion-item] p { opacity: 1; transform: translateY(0); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item]::after { will-change: transform; transition: transform var(--motion-section) var(--motion-ease) var(--motion-delay, 0ms); }
.motion-enabled [data-motion="panel-group"][data-motion-state="running"] [data-motion-item] p { 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"] .layout-lines i { transform: scaleX(0); }
.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"] .layout-lines i,
.motion-enabled [data-motion="about"][data-motion-state="done"] .layout-lines i { transform: scaleX(1); }
.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"] .layout-lines i { will-change: transform; transition: transform var(--motion-reveal) var(--motion-ease) calc(var(--motion-delay, 0ms) + 80ms); }

.motion-enabled [data-motion="member-group"] [data-motion-item] { opacity: 0; transform: translateY(var(--motion-distance-md)); }
.motion-enabled [data-motion="member-group"] .member-photo::after { transform: scaleY(1); }
.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"] .member-photo::after,
.motion-enabled [data-motion="member-group"][data-motion-state="done"] .member-photo::after { transform: scaleY(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="member-group"][data-motion-state="running"] .member-photo::after { will-change: transform; transition: transform var(--motion-section) var(--motion-ease) calc(var(--motion-delay, 0ms) + 80ms); }

.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"] .footer-brand { opacity: 0; }
.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"] .footer-brand,
.motion-enabled [data-motion="footer"][data-motion-state="done"] .footer-brand { opacity: 1; }
.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"] .footer-brand { will-change: opacity; transition: opacity var(--motion-reveal) var(--motion-ease); }
.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 80px; }
  .scenario { min-height: 340px; }
  .about-frame { min-height: 440px; }
  .layout-lines { padding: 52px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 20px; }
  .events-header, .event-row { grid-template-columns: 84px minmax(0, 1.618fr) minmax(140px, 1fr); gap: 20px; }
  .event-empty { grid-template-columns: 84px minmax(0, 1fr); }
  .contact { padding-inline: 32px; gap: 48px; }
}

@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; }
  nav { gap: 16px; }
  nav a:nth-child(1), nav a:nth-child(2) { display: none; }
  .header-cta { min-width: 80px; min-height: 44px; }
  .hero { min-height: 780px; }
  .hero-photo { object-position: 53% center; }
  .hero-logo { top: 26%; width: min(76vw, 360px); }
  .scenario-grid, .about-frame, .contact { grid-template-columns: 1fr; }
  .scenario { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scenario:last-child { border-bottom: 0; }
  .about-frame { min-height: auto; }
  .about-frame > img { width: min(80vw, 360px); }
  .layout-lines { min-height: 320px; padding: 44px 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; }
  .events-header, .event-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-inline: 16px; }
  .event-empty { grid-template-columns: 64px minmax(0, 1fr); }
  .events-header span:last-child { display: none; }
  .event-row { min-height: 136px; }
  .contact { padding: var(--space-section) 20px; }
  .contact-form { grid-template-columns: 1fr; gap: 20px; }
  .submit-button { grid-column: 1; width: 100%; justify-self: stretch; }
  footer { min-height: 260px; flex-direction: column; padding: 52px 0; align-items: flex-start; }
  .social-placeholders { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 380px) {
  nav { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  nav a, nav 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="about"] .layout-lines i,
  .motion-enabled [data-motion="contact-form"] .field::after { transform: scaleX(1); }
  .motion-enabled [data-motion="panel-group"] [data-motion-item]::after,
  .motion-enabled [data-motion="member-group"] .member-photo::after { transform: scaleY(0); }
  .motion-enabled [data-motion="section-label"],
  .motion-enabled [data-motion="about"] > img,
  .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"] .footer-brand,
  .motion-enabled [data-motion="footer"] [data-motion-item] { transform: none; }
}