/* Navigation is part of each edition's language, rather than an opaque shared bar.
   Variables keep geometry/focus shared without overriding the theme's material. */
.ex-scene > .ex-header { backdrop-filter: var(--ex-header-blur,none); -webkit-backdrop-filter: var(--ex-header-blur,none); }
.ex-header > .ex-primary {
  background: var(--ex-header-action-bg, var(--wc-ink));
  color: var(--ex-header-action-ink, var(--wc-bg));
  border-color: var(--ex-header-action-bg, var(--wc-ink));
}
.ex-header > nav > [aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ex-header > nav > .ex-button { transition: background-color 160ms ease-out, transform 140ms cubic-bezier(.22,1,.36,1); }
.ex-scene > .ex-header :focus-visible { outline-color: var(--ex-header-ink, var(--wc-ink)); }

.wc-style-apple.ex-scene { --ex-header-fill: #f5f5f7eb; --ex-header-height: 64px; --ex-header-padding: 12px 6%; --ex-header-blur: blur(18px); }
.wc-style-apple.ex-scene > .ex-header { border-bottom: 1px solid #1d1d1f12; }
.wc-style-fluent.ex-scene { --ex-header-fill: #e9edf4f5; --ex-header-height: 64px; --ex-header-padding: 12px 28px; --ex-header-blur: blur(18px); }
.wc-style-fluent.ex-scene > .ex-header { box-shadow: 0 1px 0 #fff inset, 0 1px 0 #ccd3dd; }
.wc-style-carbon.ex-scene { --ex-header-fill: #161616; --ex-header-ink: #f4f4f4; --ex-header-height: 56px; --ex-header-padding: 10px 28px; --ex-header-action-bg: #f4f4f4; --ex-header-action-ink: #161616; }
.wc-style-carbon.ex-scene > .ex-header .ex-brand { font-weight: 400; font-size: 16px; letter-spacing: 0; }
.wc-style-polaris.ex-scene { --ex-header-fill: #fff; --ex-header-height: 64px; --ex-header-padding: 12px 28px; }
.wc-style-polaris.ex-scene > .ex-header { border-bottom: 1px solid #d4d8d6; }
.wc-style-spectrum.ex-scene { --ex-header-fill: #1d1d1d; --ex-header-height: 60px; --ex-header-padding: 12px 26px; }
.wc-style-spectrum.ex-scene > .ex-header { border-bottom: 1px solid #ffffff28; }

.wc-style-material.ex-scene { --ex-header-fill: #f0e7f7; --ex-header-height: 76px; --ex-header-padding: 16px 4%; }
.wc-style-material-expressive.ex-scene { --ex-header-fill: #f1daf8; --ex-header-height: 82px; --ex-header-padding: 18px 4%; }
:is(.wc-style-material,.wc-style-material-expressive).ex-scene > .ex-header nav { gap: 6px; }
:is(.wc-style-material,.wc-style-material-expressive).ex-scene > .ex-header nav > .ex-button { padding: 10px 16px; border-radius: 24px; }
:is(.wc-style-material,.wc-style-material-expressive).ex-scene > .ex-header nav > [aria-current='page'] { background: #dfcfeb; color: #32213f; text-decoration: none; }
.wc-style-material-expressive.ex-scene > .ex-header .ex-brand { font-size: 27px; font-weight: 800; letter-spacing: -.06em; }
.wc-style-material-expressive.ex-scene > .ex-header > .ex-primary { border-radius: 18px 18px 18px 5px; }

.wc-style-flat.ex-scene { --ex-header-fill: #26324c; --ex-header-ink: #fff; --ex-header-action-bg: #fff; --ex-header-action-ink: #26324c; --ex-header-height: 64px; --ex-header-padding: 12px 4%; }
.wc-style-flat.ex-scene > .ex-header { box-shadow: none; }
.wc-style-skeuomorphic.ex-scene { --ex-header-fill: linear-gradient(#574c40,#312a23), #312a23; --ex-header-ink: #f3e7cc; --ex-header-action-bg: #f3e7cc; --ex-header-action-ink: #312a23; }
.wc-style-skeuomorphic.ex-scene > .ex-header .ex-brand { text-shadow: 0 -1px #140f09; letter-spacing: .04em; }
.wc-style-neumorphic.ex-scene { --ex-header-fill: #e1e7ef; --ex-header-padding: 22px 4%; }
.wc-style-neumorphic.ex-scene > .ex-header nav { padding: 6px; border-radius: 25px; gap: 4px; box-shadow: inset 3px 3px 7px #929eaa55, inset -3px -3px 7px #fff9; }
.wc-style-neumorphic.ex-scene > .ex-header nav > .ex-button { border-radius: 18px; padding: 9px 15px; box-shadow: none; }
.wc-style-neumorphic.ex-scene > .ex-header nav > [aria-current='page'] { background: #e1e7ef; box-shadow: 3px 3px 7px #929eaa55, -3px -3px 7px #fff9; text-decoration: none; }
.wc-style-glass.ex-scene { --ex-header-fill: linear-gradient(120deg,#ffffff0d,#ffffff03), #242e50d9; --ex-header-radius: 22px; --ex-header-blur: blur(22px) saturate(140%); --ex-header-padding: 16px 26px; }
.wc-style-glass.ex-scene > .ex-header { margin: 20px 4% 0; top: 14px; border: 1px solid #ffffff4d; box-shadow: inset 0 1px #ffffff30, 0 12px 30px #101b3b30; }
.wc-style-glass.ex-scene[data-opaque='true'] { --ex-header-fill: #242e50; --ex-header-blur: none; }
.wc-style-glass.ex-scene[data-opaque='true'] :is(.ex-hero-visual,.ex-lab-preview) { background: #293560; backdrop-filter: none; }
.wc-style-clay.ex-scene { --ex-header-fill: #e9daf0; --ex-header-radius: 28px; --ex-header-padding: 20px 28px; }
.wc-style-clay.ex-scene > .ex-header { margin: 22px 3% 0; top: 14px; border: 1px solid #d9c7e3; box-shadow: inset 5px 5px 10px #fff9, inset -5px -5px 10px #9d79b233, 0 10px 25px #6c487b17; }
.wc-style-clay.ex-scene > .ex-header nav > .ex-button { border-radius: 14px; padding: 8px 12px; }
.wc-style-paper.ex-scene { --ex-header-padding: 19px 0; }
.wc-style-paper.ex-scene > .ex-header .ex-brand { font-family: Georgia,'Songti SC',serif; font-size: 22px; }

.wc-style-memphis.ex-scene { --ex-header-fill: #fff4d7; }
.wc-style-anti-design.ex-scene { --ex-header-fill: #f79ac8; }
.wc-style-maximalist.ex-scene { --ex-header-fill: #4a318b; --ex-header-ink: #fff4cd; --ex-header-action-bg: #f5c63e; --ex-header-action-ink: #2b194b; }
.wc-style-editorial.ex-scene > .ex-header { grid-template-columns: minmax(220px,1fr) auto minmax(150px,1fr); padding-block: 22px !important; }
.wc-style-editorial.ex-scene > .ex-header .ex-brand { font-family: Georgia,'Songti SC',serif; font-size: 22px; }
.wc-style-editorial.ex-scene > .ex-header > .ex-primary { justify-self: end; }
.wc-style-luxury.ex-scene { --ex-header-padding: 25px 7%; }
.wc-style-luxury.ex-scene > .ex-header .ex-brand { font-family: Georgia,serif; font-weight: 400; letter-spacing: .1em; }

.wc-style-y2k.ex-scene { --ex-header-fill: linear-gradient(#f6f8ffff,#b6bfdfea 48%,#8798c5e6), #cbd4f3; --ex-header-radius: 34px; --ex-header-padding: 15px 28px; }
.wc-style-y2k.ex-scene > .ex-header { top: 14px; border-color: #f5f8ff; box-shadow: inset 0 2px #fff, inset 0 -2px #5e74ad44, 0 10px 20px #6472ac35; }
.wc-style-y2k.ex-scene > .ex-header .ex-brand { font-style: italic; font-weight: 800; letter-spacing: -.06em; }
.wc-style-frutiger-aero.ex-scene { --ex-header-fill: linear-gradient(#ffffffd9,#e3f8f1c7), #c6ecf3; --ex-header-radius: 16px; --ex-header-padding: 16px 26px; --ex-header-blur: blur(16px); }
.wc-style-frutiger-aero.ex-scene > .ex-header { margin: 16px 3% 0; top: 12px; border: 1px solid #fff9; box-shadow: inset 0 1px #fff, 0 8px 25px #286b8820; }
.wc-style-frutiger-aero.ex-scene[data-opaque='true'] { --ex-header-fill: #e3f8f1; --ex-header-blur: none; }
.wc-style-vaporwave.ex-scene { --ex-header-fill: #c7c4e2; }
.wc-style-grunge.ex-scene { --ex-header-fill: #b4a78c; }
.wc-style-cyberpunk.ex-scene { --ex-header-fill: #f6f04c; --ex-header-ink: #131823; --ex-header-action-bg: #131823; --ex-header-action-ink: #f6f04c; }
.wc-style-cyberpunk.ex-scene > .ex-header .ex-brand { letter-spacing: .05em; }
.wc-style-wabi-sabi.ex-scene { --ex-header-padding: 25px 0; }

/* Tape reels move; the player chassis and its typography stay still. */
.ex-audio-meter { display: inline-flex; height: 16px; gap: 3px; align-items: center; margin-top: 14px; }
.ex-audio-meter i { height: 14px; width: 3px; background: var(--wc-ink); border-radius: 2px; transform: scaleY(.25); }
.ex-listening-room[data-playing='false'] .ex-audio-meter { opacity: .5; }
@keyframes ex-reel-turn { to { transform: rotate(360deg); } }
@keyframes ex-audio-level { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* Events have authored posters. The motif and its text occupy separate columns. */
.ex-event-poster.ex-art { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 7%; container-type: inline-size; border-radius: 30px; background: #e9dff1; color: #32213f; }
.ex-event-poster > .ex-event-copy { height: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.ex-event-copy .ex-event-brand { font: 750 5cqw/1 'Atlas Sans', sans-serif; letter-spacing: -.05em; }
.ex-event-copy strong { font: 650 5.8cqw/1.25 -apple-system,'PingFang SC',sans-serif; max-width: 4em; letter-spacing: -.04em; }
.ex-event-copy .ex-event-format { font: 600 1.8cqw/1.5 'Atlas Sans', sans-serif; letter-spacing: .08em; }
.ex-event-poster > .ex-event-motif { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 45% 45% 12px 12px; background: #5b4969; }
.ex-event-motif i { display: block; position: absolute; }
.ex-event-poster-0 .ex-event-motif i:first-child { width: 80%; height: 62%; border: 2.8cqw solid #d7cca8; border-radius: 50%; top: 19%; left: 10%; }
.ex-event-poster-0 .ex-event-motif i:nth-child(2) { width: 25%; height: 20%; border-radius: 50%; top: 40%; left: 38%; background: #d7cca8; }
.ex-event-poster-1 { background: #e5e8cf !important; color: #243d34 !important; }
.ex-event-poster-1 .ex-event-motif { background: #31594d; border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 10%; }
.ex-event-poster-1 .ex-event-motif i { position: static; background: #c7d5a9; border-radius: 50%; }
.ex-event-poster-1 .ex-event-motif i:nth-child(2), .ex-event-poster-1 .ex-event-motif i:nth-child(3) { border-radius: 0; }
.ex-event-poster-2 { background: #f5ddd6 !important; color: #542e31 !important; }
.ex-event-poster-2 .ex-event-motif { background: #eeb5a0; border-radius: 50% 50% 14px 14px; }
.ex-event-poster-2 .ex-event-motif i:first-child { width: 66%; height: 65%; top: 14%; left: 5%; border-radius: 40%; background: #a04464; }
.ex-event-poster-2 .ex-event-motif i:nth-child(2) { width: 66%; height: 65%; top: 30%; left: 30%; border-radius: 40%; background: #3d5d9b; mix-blend-mode: multiply; }
.ex-event-poster > figcaption { grid-column: 1/-1; display: flex; justify-content: space-between; gap: 12px; align-self: end; border-top: 1px solid currentColor; padding-top: 3%; font: 600 1.8cqw/1.5 'Atlas Sans', sans-serif; }
.ex-event-expressive.ex-event-poster { border-radius: 52px 20px 46px 20px; gap: 5% 8%; background: #eddaff; }
.ex-event-expressive .ex-event-copy .ex-event-brand { font-size: 7.5cqw; font-weight: 800; }
.ex-event-expressive .ex-event-motif { transform: rotate(-8deg) scale(.94); border-radius: 35% 12% 35% 12%; }
.ex-event-expressive.ex-event-poster-1 .ex-event-motif { border-radius: 50% 8% 50% 8%; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .wc-style-apple.ex-scene { --ex-header-fill: #f5f5f7; --ex-header-blur: none; }
  .wc-style-fluent.ex-scene { --ex-header-fill: #e9edf4; --ex-header-blur: none; }
  .wc-style-glass.ex-scene { --ex-header-fill: #242e50; --ex-header-blur: none; }
  .wc-style-glass.ex-scene :is(.ex-hero-visual,.ex-lab-preview) { background: #293560; backdrop-filter: none; }
  .wc-style-frutiger-aero.ex-scene { --ex-header-fill: #e3f8f1; --ex-header-blur: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .wc-style-glass.ex-scene { --ex-header-fill: #242e50; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-scene .ex-audio-meter i, .ex-scene .ex-tape-reel { animation: none !important; }
}