/*
 * 全站用户体验安全网
 * 不改变视觉方向，只确保键盘、弱动效、焦点和无图状态足够清楚。
 */
:root{
  --ux-focus:#ff3b1f;
  --ux-focus-dark:#f2eee6;
}

html{
  overflow-x:hidden;
}

.skip-link{
  position:fixed;
  left:var(--side,4vw);
  top:12px;
  z-index:3000;
  transform:translateY(-160%);
  padding:11px 15px;
  background:#11110f;
  color:#f4f1ea;
  border:1px solid rgba(255,255,255,.28);
  font-size:15px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:transform .22s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
  transform:none;
}

main[tabindex="-1"]:focus{
  outline:none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--ux-focus);
  outline-offset:5px;
  box-shadow:0 0 0 7px rgba(255,59,31,.13);
}

.dark-section a:focus-visible,
.dark-section button:focus-visible,
.team-hero a:focus-visible,
.team-hero button:focus-visible{
  outline-color:var(--ux-focus-dark);
  box-shadow:0 0 0 7px rgba(242,238,230,.16);
}

.using-keyboard .site-nav a.active::after,
.using-keyboard .site-nav a[aria-current="page"]::after{
  transform:scaleX(1);
}

.media-slot{
  min-height:120px;
}

.media-slot img:not([hidden]){
  background:#d8d6cf;
}

.upload-trigger,
.text-link,
.outline-link,
.all-link,
.person-open,
.news-tabs button,
.filter-bar button,
.people-filter button{
  min-height:36px;
}

button,
a,
input,
select,
textarea{
  touch-action:manipulation;
}

[id]{
  scroll-margin-top:110px;
}

.journal-empty,
.archive-empty,
.people-empty,
.no-records,
.empty,
.partner-empty{
  color:var(--cts-muted-light-bg,#565752);
  line-height:1.8;
}

@media(max-width:900px){
  input,
  select,
  textarea{
    font-size:max(16px,1em);
  }
  .site-nav a,
  .utility-header a,
  .upload-trigger,
  .text-link,
  .outline-link,
  .all-link,
  .person-open,
  .dialog-close,
  .clear-records,
  .news-tabs button,
  .journal-filter button,
  .filter-bar button,
  .people-filter button,
  .search-suggestions button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto!important;
  }
  .team-ink,
  .inner-hero-ink,
  .hero-seal,
  .orbit-ink-wash,
  .research-ink-halo,
  canvas{
    animation:none!important;
    transition:none!important;
  }
}

/* The full navigation needs more room than the original 900px layout breakpoint. */
.site-header .brand{flex-shrink:0;}
.site-header .site-nav a{white-space:nowrap;}
@media(max-width:1279px){
  .site-header{padding-top:18px;}
  .site-header .menu-toggle{display:flex;align-items:center;gap:10px;color:inherit;}
  .site-header .menu-toggle i{width:18px;height:1px;background:currentColor;}
  .site-header .site-nav{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:safe center;
    gap:12px;
    padding:clamp(24px,6vh,64px) 12vw;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--ink);
    color:var(--legible-dark-main,#f0eee7)!important;
    transform:translateY(-100%);
    transition:transform .6s;
    z-index:-1;
    mix-blend-mode:normal;
  }
  .site-header .site-nav.open{transform:none;}
  .site-header .site-nav a,
  .site-header:not(.inner-header) .site-nav a,
  .site-header.is-on-dark .site-nav a{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    min-height:44px;
    font-family:WenYue,serif;
    font-size:clamp(25px,6vw,42px)!important;
    line-height:1.25;
    color:var(--legible-dark-main,#f0eee7)!important;
    text-shadow:none!important;
  }
  .site-header .site-nav em,
  .site-header:not(.inner-header) .site-nav em,
  .site-header.is-on-dark .site-nav em{color:var(--legible-dark-muted,#cac7bd)!important;}
  .site-header .site-nav .nav-search,
  .site-header .site-nav a[href="search.html"]{font-family:PingFang,sans-serif!important;font-size:18px!important;margin-top:4px;}
  .site-header:has(.site-nav.open) .brand,
  .site-header:has(.site-nav.open) .brand-name,
  .site-header:has(.site-nav.open) .brand-en,
  .site-header:has(.site-nav.open) .brand-roof,
  .site-header:has(.site-nav.open) .menu-toggle{color:var(--legible-dark-main,#f0eee7)!important;}
}