/* V420 shared responsive surface: charcoal/crimson palette and stable page geometry. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #0c0c0d;
  --panel2: #111112;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --red: #b5121b;
  --red2: #e32631;
  --line: rgba(255, 255, 255, .08);
  --wk-velvet-charcoal: var(--bg);
  --wk-crimson: var(--red);
  --wk-fine-line: rgba(255, 255, 255, .05);
}
html { background: var(--bg); }
body:not(.wk-premiere-canvas) { background-color: var(--bg); color: #fff; }

/* Three stable header tracks keep navigation and language controls independent. */
html body header.site-header .container.nav {
  display: grid !important;
  grid-template-columns: minmax(140px, .9fr) minmax(0, 3fr) minmax(132px, .8fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  position: relative;
}
html body header.site-header .nav > .brand { grid-column: 1; min-width: 0; }
html body header.site-header .nav > .nav-links {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.75rem), 1fr));
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  gap: clamp(4px, .55vw, 12px) !important;
}
html body header.site-header .nav > .nav-links > a {
  display: flex;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 7px clamp(5px, .7vw, 11px);
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto;
  text-align: center;
  line-height: 1.2;
  letter-spacing: clamp(.015em, .08vw, .07em);
}
html body header.site-header .nav > .wk-language-picker {
  grid-column: 3;
  min-width: 0;
  width: 100%;
  justify-self: end;
  position: relative;
  z-index: 1003;
}
html body header.site-header .wk-language-picker > button { max-width: 100%; min-width: 0; }

/* Depth and polish without hover movement or lost keyboard focus. */
html body :is(button, .btn, .social, [role="button"]) {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html body :is(button, .btn, .social, [role="button"]):hover { transform: none !important; }
html body :is(button, .btn, .social, [role="button"]):focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid rgba(227, 38, 49, .88);
  outline-offset: 3px;
}
html body .btn-primary,
html body button[type="submit"],
html body .wk-package-download {
  background: linear-gradient(180deg, #d51b27, #8f0d16);
  border: 1px solid rgba(255, 105, 115, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 18px rgba(0,0,0,.38);
}

/* Footer columns and social row share the same responsive layout system. */
html body .footer .container .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 30px) !important;
}
html body .footer .container .footer-grid > *,
html body .footer .container .wk-footer-privacy > * { min-width: 0; }
html body .footer .container .footer-social-bottom {
  width: 100%; display: flex; justify-content: center; align-items: center;
}
html body .footer .container .footer-social-bottom .socials {
  display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%;
}
html body .footer .container .social { flex: 0 0 auto; }

@media (max-width: 900px) {
  html body header.site-header .container.nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(112px, .55fr);
    gap: 10px;
  }
  html body header.site-header .nav > .brand { grid-column: 1; grid-row: 1; }
  html body header.site-header .nav > .menu {
    display: block !important; grid-column: 2; grid-row: 1; justify-self: center; white-space: nowrap;
  }
  html body header.site-header .nav > .wk-language-picker { grid-column: 3; grid-row: 1; }
  html body header.site-header .nav > .nav-links { display: none !important; }
  html body header.site-header .nav.open > .nav-links {
    display: grid !important;
    position: absolute !important;
    inset: calc(100% - 1px) 0 auto;
    grid-column: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 8px !important;
    max-height: min(70vh, 560px);
    overflow: auto;
    padding: 14px;
    background: #09090a;
    border: 1px solid var(--wk-fine-line);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.06);
    z-index: 1002;
  }
  html body header.site-header .nav.open > .nav-links > a {
    min-height: 48px; white-space: normal !important; overflow-wrap: anywhere !important;
  }
  html body .footer .container .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  html body header.site-header .container.nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(92px, .55fr); gap: 7px;
  }
  html body header.site-header .nav > .brand.brand-logo,
  html body header.site-header .nav > .brand.brand-logo > img { max-width: 100% !important; min-width: 0 !important; }
  html body header.site-header .nav > .menu { padding: 8px 9px; font-size: 11px; }
  html body header.site-header .wk-language-picker > button { padding-inline: 7px; font-size: 11px; }
  html body header.site-header .nav.open > .nav-links { grid-template-columns: minmax(0, 1fr); }
  html body .footer .container .footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .footer .container .copyright { align-items: center; text-align: center; }
  html body .footer .container .socials { gap: 12px; }
  html body .footer .container .social { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(button, .btn, .social, [role="button"]) { transition: none; }
}

/* Override the legacy Contact no-wrap exception so translated labels share grid space. */
html body header.site-header div.container.nav > nav.nav-links > a[data-wk-i18n-key="wk.nav.contact"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
}

/* V420 desktop header: fixed non-wrapping link row between brand and language control. */
@media (min-width: 901px) {
  html body header.site-header .container.nav { grid-template-columns: auto 1fr auto !important; }
  html body header.site-header .nav > .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(10px, 1.25vw, 24px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html body header.site-header .nav > .nav-links > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 9px clamp(12px, 1vw, 20px) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}

/* V420 Echoes reserves room before content and media controls hydrate. */
html body .wk-echoes-page { min-height: 100vh; contain-intrinsic-size: auto 720px; }
html body .wk-echoes-hero { min-height: 240px; contain-intrinsic-size: auto 280px; }
html body :is(.wk-echoes-console, .wk-fan-console) {
  min-height: 360px;
  contain-intrinsic-size: auto 360px;
}
html body :is(.wk-fan-entries, #wkEchoesList) {
  min-height: 220px;
  contain-intrinsic-size: auto 220px;
}
html body :is(.wk-echo-modal-panel, .wk-fan-form) {
  contain-intrinsic-size: auto 520px;
}
html body :is(.wk-echo-message-composer, .wk-fan-message-editor, .wk-fan-message-wrap) {
  min-height: 122px;
  contain-intrinsic-size: auto 122px;
}
html body :is(.wk-tts-player, .wk-text-to-speech-player, [data-wk-tts-player]) {
  min-height: 56px;
  contain-intrinsic-size: auto 56px;
}
html body :is(.wk-audio-visualizer, .wk-voice-visualizer, [data-wk-audio-visualizer], [data-wk-voice-visualizer]) {
  min-height: 48px;
  contain-intrinsic-size: auto 48px;
}

/* Remove motion that changes layout position; retain the requested subtle page transition. */
html body * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html body :is(.wk-echoes-page, .wk-echoes-console, .wk-fan-console, .wk-echo-modal-panel,
  .wk-echo-message-composer, .wk-fan-message-editor, .wk-tts-player,
  .wk-text-to-speech-player, [data-wk-tts-player], .wk-audio-visualizer,
  .wk-voice-visualizer, [data-wk-audio-visualizer], [data-wk-voice-visualizer]) {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* Keep fixed/sticky shells untransformed so their overlays retain viewport anchoring. */
html body :is(.wk-echoes-page, .wk-echoes-console, .wk-fan-console, .wk-echo-modal-panel) {
  transform: none !important;
  backface-visibility: visible;
}
html body :is(.wk-echo-message-composer, .wk-fan-message-editor, .wk-tts-player,
  .wk-text-to-speech-player, [data-wk-tts-player], .wk-audio-visualizer,
  .wk-voice-visualizer, [data-wk-audio-visualizer], [data-wk-voice-visualizer]) {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}


/* V420 Echoes CLS guard reserves speech and composer geometry before hydration. */
html body .wk-echoes-page :is(.wk-echo-message-composer, .wk-fan-message-editor, .wk-fan-message-wrap) { min-height: 122px; contain-intrinsic-size: auto 122px; }
html body .wk-echoes-page :is(.wk-tts-player, .wk-text-to-speech-player, [data-wk-tts-player]) { min-height: 56px; contain-intrinsic-size: auto 56px; }
html body .wk-echoes-page :is(.wk-audio-visualizer, .wk-voice-visualizer, [data-wk-audio-visualizer], [data-wk-voice-visualizer]) { min-height: 48px; contain-intrinsic-size: auto 48px; }

/* Preserve Contact as a fixed desktop link despite its legacy template override. */
@media (min-width: 901px) {
  html body header.site-header div.container.nav > nav.nav-links > a[data-wk-i18n-key="wk.nav.contact"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}
/* V420 stabilized navigation and Echoes reservation. */
@media (min-width: 901px) {
  html body header.site-header .nav > .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    gap: 20px !important;
  }
  html body header.site-header .nav > .nav-links > a {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  html body header.site-header div.container.nav > nav.nav-links > a[data-wk-i18n-key="wk.nav.contact"] {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}
html body .wk-echoes-page #wkEchoesList.wk-fan-entries {
  min-height: 600px !important;
  contain-intrinsic-size: auto 600px !important;
  display: block !important;
}

/* V420: keep Echoes desktop navigation labels on one line and center each label in its button. */
@media (min-width: 901px) {
  html body header.site-header .container.nav > nav.nav-links.nav-links-echoes {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    justify-content: center !important;
    gap: clamp(6px, .55vw, 12px) !important;
    white-space: nowrap !important;
  }
  html body header.site-header .container.nav > nav.nav-links.nav-links-echoes > a {
    display: flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    padding-inline: clamp(7px, .6vw, 12px) !important;
  }
}

/* V420: Echoes desktop nav uses intrinsic-width links; Contact is vertically centered. */
@media (min-width: 901px) {
  html body header.site-header .container.nav > nav.nav-links.nav-links-echoes {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: clamp(6px, .55vw, 12px) !important;
  }
  html body header.site-header .container.nav > nav.nav-links.nav-links-echoes > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 clamp(7px, .6vw, 12px) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  html body header.site-header .container.nav > nav.nav-links.nav-links-echoes > a[data-wk-i18n-key="wk.nav.contact"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }
}
/* V420: normalize primary desktop navigation buttons and center every label. */
@media (min-width: 901px) {
  html body header.site-header .container.nav > nav.nav-links > a {
    display: inline-flex !important;
    flex: 0 0 clamp(48px, 4.95vw, 76px) !important;
    width: clamp(48px, 4.95vw, 76px) !important;
    min-width: clamp(48px, 4.95vw, 76px) !important;
    max-width: clamp(48px, 4.95vw, 76px) !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    font-size: clamp(7px, .72vw, 11px) !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  html body header.site-header .container.nav > nav.nav-links {
    align-items: center !important;
  }
}
/* V420 keeps expensive rendering hints on moving components only. Page shells stay untransformed so sticky and fixed UI remain correctly anchored. */
@media (prefers-reduced-motion: no-preference) {
  html body .wk-fan-entry,
  html body .wk-fan-pagination {
    backface-visibility: hidden;
  }
}
/* Keep document navigation immediate; page-wide cross-document transitions caused a visible delay. */
@view-transition { navigation: none; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
/* Keep Echoes avatar geometry stable during keyed comment refreshes. */
.wk-fan-entry > img {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  content-visibility: auto;
}
/* V441: the Echoes reconciler is the sole owner of viewport anchoring. */
html body .wk-echoes-page #wkEchoesList.wk-fan-entries { overflow-anchor: none !important; scroll-behavior: auto !important; }

/* V443: consistent full-viewport minimum for page content wrappers. */
body > main{min-height:100vh}
.wk-media-page{display:block;min-height:100vh}