/* Shared by React public pages and server-rendered articles/templates. */
.editorial-page {
  --ds-text: var(--ink); --ds-muted: var(--muted); --ds-accent: #8faef5; --ds-accent-ink: #b5cbff;
}
.editorial-page.theme-light { --ds-accent: #315bce; --ds-accent-ink: #315bce; }
.editorial-page .home-nav {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
  max-width: none; height: 64px; min-height: 64px; margin: 0; padding: 0 6vw; gap: 0;
}
.editorial-page .home-nav .home-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-width: 220px; color: var(--ds-text); }
.editorial-page .home-nav .soundfield-wordmark { display: flex; align-items: center; width: 72px; height: 52px; }
.editorial-page .home-nav .soundfield-wordmark img { width: 100%; height: 100%; object-fit: contain; }
.editorial-page .home-nav .home-brand-copy { display: grid; gap: 3px; text-align: left; }
.editorial-page .home-brand-copy b { font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.editorial-page .home-brand-copy small { font-size: 8px; letter-spacing: .13em; opacity: .6; }
.editorial-page .home-nav > nav { display: flex; align-items: center; flex: 1; justify-content: center; }
.editorial-page .home-nav-actions > :is(a, button) {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; min-height: 38px;
  padding: 0 10px; margin: 0; color: var(--ds-text); text-decoration: none; border: 1px solid transparent;
  border-radius: 10px; background: transparent; font-size: 12px; font-weight: 600;
}
.editorial-page .home-nav-actions .theme-toggle { width: 38px; padding: 0; background: color-mix(in srgb, var(--ds-text) 4%, transparent); }
.editorial-page .home-nav #editorial-theme { border-color: transparent; border-radius: 10px; min-height: 38px; padding: 0; }
.editorial-page.theme-dark .editorial-moon, .editorial-page.theme-light .editorial-sun { display: none; }
.editorial-page .home-nav-actions > .home-account-entry { gap: 8px; }
.editorial-page .home-account-entry span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: color-mix(in srgb, var(--ds-accent) 18%, transparent); color: var(--ds-accent-ink); font-size: 11px; }
.editorial-page .home-account-entry b { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editorial-page .home-nav-actions > .home-studio-entry { gap: 9px; padding: 0 14px; color: var(--ds-accent-ink); border-color: color-mix(in srgb, var(--ds-accent) 26%, transparent); background: color-mix(in srgb, var(--ds-accent) 9%, transparent); }
.editorial-page .home-nav-actions > :is(a, button):hover { background: color-mix(in srgb, var(--ds-accent) 12%, transparent); }
.editorial-page .editorial-toc { top: 90px; }
.editorial-page .editorial-body section { scroll-margin-top: 90px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 4.5vw;
  background: rgb(11 16 25 / .94);
  border-bottom: 1px solid rgb(171 194 230 / .15);
  box-shadow: 0 6px 24px rgb(0 0 0 / .08), inset 0 1px rgb(255 255 255 / .035);
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand { display: flex; align-items: center; gap: 10px; min-width: 190px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav .soundfield-wordmark.compact { width: 64px; height: 50px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand-copy { display: grid; gap: 3px; text-align: left; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand-copy b { font-size: 9px; font-weight: 600; letter-spacing: .08em; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand-copy small { font-size: 8px; letter-spacing: .13em; opacity: .6; }
:is(.home-page, .public-page).theme-light .home-nav {
  background: rgb(250 252 255 / .96);
  border-color: rgb(79 104 141 / .14);
  box-shadow: 0 6px 24px rgb(29 49 85 / .045), inset 0 1px rgb(255 255 255 / .9);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.home-page, .public-page)[class*="theme-"] .home-nav {
    background: linear-gradient(115deg, rgb(22 31 46 / .67), rgb(11 16 25 / .68));
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  :is(.home-page, .public-page).theme-light .home-nav {
    background: linear-gradient(115deg, rgb(255 255 255 / .76), rgb(244 248 255 / .74));
  }
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav nav { gap: 4px; flex: 1; justify-content: center; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav nav > :is(a, button) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  color: var(--ds-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav nav > :is(a, button):hover {
  color: var(--ds-text);
  background: color-mix(in srgb, var(--ds-text) 5%, transparent);
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav nav > [aria-current] {
  color: var(--ds-accent-ink);
  background: color-mix(in srgb, var(--ds-accent) 8%, transparent);
  border-color: transparent;
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav nav > [aria-current]:after {
  content: none;
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 24px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > button {
  height: 38px; min-height: 38px; margin: 0; border-radius: 10px; font-size: 12px; font-weight: 600;
  box-shadow: inset 0 1px rgb(255 255 255 / .045); transform: none;
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .theme-toggle { width: 38px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .home-account-entry { background: transparent; border-color: transparent; gap: 8px; padding: 0 10px; }
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .home-studio-entry {
  gap: 9px; padding: 0 14px; color: var(--ds-accent-ink); border-color: color-mix(in srgb, var(--ds-accent) 26%, transparent);
  background: color-mix(in srgb, var(--ds-accent) 9%, transparent);
}
:is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > button:not(:disabled):hover {
  color: var(--ds-text); background: color-mix(in srgb, var(--ds-accent) 15%, transparent); border-color: color-mix(in srgb, var(--ds-accent) 32%, transparent); transform: none;
}
@media (max-width: 1250px) and (min-width: 901px) {
  :is(.home-page, .public-page)[class*="theme-"] .home-nav { padding-inline: 24px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav nav > :is(a, button) { padding-inline: 8px; font-size: 11px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions { gap: 6px; margin-left: 12px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-brand { min-width: 160px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-brand-copy { display: none; }
}
@media (max-width: 900px) {
  :is(.home-page, .public-page)[class*="theme-"] .home-nav { padding-inline: 18px; gap: 0; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand { min-width: 0; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav .home-brand-copy { display: none; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav .soundfield-wordmark.compact { width: 56px; height: 44px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav nav { display: none; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions { margin-left: auto; gap: 6px; }
  .editorial-page .home-nav { height: 56px; min-height: 56px; padding-inline: 18px; }
  .editorial-page .home-nav .home-brand { min-width: 0; }
  .editorial-page .home-nav .home-brand-copy { display: none; }
  .editorial-page .home-nav .soundfield-wordmark { width: 56px; height: 44px; }
}
@media (max-width: 480px) {
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > button { height: 34px; min-height: 34px; font-size: 11px; border-radius: 8px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .theme-toggle { width: 34px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .home-account-entry { padding-inline: 5px; }
  :is(.home-page, .public-page)[class*="theme-"] .home-nav-actions > .home-studio-entry { padding-inline: 9px; gap: 5px; }
  .editorial-page .home-nav-actions > a { height: 34px; min-height: 34px; font-size: 11px; border-radius: 8px; }
  .editorial-page .home-nav-actions > .home-account-entry { padding-inline: 5px; }
  .editorial-page .home-nav-actions > .home-studio-entry { padding-inline: 9px; gap: 5px; }
}

/* Phone article header and footer targets. */
@media (max-width:650px) {
  .editorial-page .home-nav .home-nav-actions > :is(a,button) { min-height:44px; height:44px; }
  .editorial-page .home-nav .home-nav-actions > .theme-toggle { order:1; }
  .editorial-page .home-nav .home-nav-actions .home-account-entry b { max-width:64px; }
  .editorial-page .home-nav .home-nav-actions > #editorial-theme {
    min-height:44px;
    height:44px;
    width:44px;
    padding:0;
    flex:0 0 44px;
  }
  .editorial-page .site-footer.home-footer nav a,
  .editorial-page .site-footer .icp-record a { min-height:44px; }
}