/* Drawers enter beneath the scene and emerge as its aperture reveals space. */
:is(.site-menu, .inner-menu-panel) {
  --drawer-ease:cubic-bezier(.22,.8,.2,1);
  --menu-nav-ink:#000;
  --menu-nav-muted:rgba(0,0,0,.3);
  --menu-case-surface:rgba(186,186,186,.2);
  --menu-case-hover-surface:#fff;
  --news-surface:#edf1f4;
  --news-ink:#303238;
  --news-muted:#61656b;
  --news-outline:rgba(25,28,34,.2);
  z-index:4;
  transform:none;
  transition:none;
}

:is(html[data-menu-theme="dark"] .site-menu, html:not([data-theme="light"]) .inner-menu-panel) {
  --menu-nav-ink:#fff;
  --menu-nav-muted:rgba(255,255,255,.3);
  --menu-case-hover-surface:transparent;
  --news-surface:#1c1c1f;
  --news-ink:#f1f1ef;
  --news-muted:#b1b1b7;
  --news-outline:rgba(255,255,255,.28);
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open),
:is(body.menu-active.menu-closing .site-menu, .inner-menu-panel.is-closing) {
  opacity:1;
  visibility:visible;
  transform:none;
  transition:none;
}

body.menu-active .menu-pill { min-width:58px; }

:is(.site-menu, .inner-menu-panel) .menu-main {
  opacity:0;
  transform:translate3d(-150px,0,0);
  transition:transform 1s var(--drawer-ease),opacity .7s ease;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) :is(.menu-main,.menu-news),
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-main a,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news button {
  pointer-events:none;
}

:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-main {
  opacity:1;
  transform:translate3d(0,0,0);
}

:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) :is(.menu-main,.menu-news),
:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-main a,
:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-news button {
  pointer-events:auto;
}

:is(body.menu-closing .site-menu, .inner-menu-panel.is-closing) .menu-main {
  opacity:0;
  transform:translate3d(-150px,0,0);
  transition-duration:.8s,.65s;
  transition-timing-function:cubic-bezier(.45,0,.55,1),ease;
  transition-delay:.1s;
}

:is(.site-menu, .inner-menu-panel) .menu-main nav { gap:0; }

:is(.site-menu, .inner-menu-panel) .menu-main nav a,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-main nav a {
  position:relative;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:35px;
  margin:0;
  padding:0;
  color:var(--menu-nav-ink);
  font-family:'Fraunces','Songti SC','SimSun','Times New Roman',serif;
  font-size:20px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:-.035em;
  text-decoration:none;
  opacity:1;
  transition:color .5s ease;
}

:is(.site-menu, .inner-menu-panel) .menu-main nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .65s var(--drawer-ease);
  pointer-events:none;
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-main nav:has(a:is(:hover,:focus-visible)) a:not(:hover,:focus-visible) {
  color:var(--menu-nav-muted);
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-main nav a:is(:hover,:focus-visible) {
  color:var(--menu-nav-ink);
  opacity:1;
  text-decoration:none;
}

:is(.site-menu, .inner-menu-panel) .menu-main nav a:is(:hover,:focus-visible)::after { transform:scaleX(1); transform-origin:left center; }
:is(.site-menu, .inner-menu-panel) .menu-main nav a:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
:is(.site-menu, .inner-menu-panel) .menu-cases { margin-top:38px; }
:is(.site-menu, .inner-menu-panel) .menu-cases .menu-label { margin-bottom:12px; font-size:10px; letter-spacing:.02em; }
:is(.site-menu, .inner-menu-panel) .menu-case-list { gap:5px; }
:is(.site-menu, .inner-menu-panel) .menu-case-list a { padding:6px 14px; font-size:14px; line-height:1.12; }

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-case-list a {
  color:var(--menu-nav-ink);
  background:var(--menu-case-surface);
  border-color:transparent;
  transform:none;
  transition:color .3s ease,background-color .3s ease,border-color .3s ease;
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-case-list a:is(:hover,:focus-visible) {
  color:var(--menu-nav-ink);
  background:var(--menu-case-hover-surface);
  border-color:currentColor;
  transform:none;
}

:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-case-list a:focus-visible {
  outline:1px solid currentColor;
  outline-offset:2px;
}

:is(.site-menu, .inner-menu-panel) .menu-news {
  width:min(100%,clamp(210px,17vw,232px));
  gap:6px;
  padding:1px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  transform:none;
  transition:none;
}

:is(.site-menu, .inner-menu-panel) .menu-news > .menu-label {
  flex:none;
  margin:0 0 7px;
  color:var(--news-muted);
  font-size:10px;
  letter-spacing:.02em;
  opacity:0;
  transform:translate3d(48px,0,0);
  transition:opacity .7s ease,transform 1s var(--drawer-ease);
}

:is(.site-menu, .inner-menu-panel) .menu-news article,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article {
  flex:none;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:none;
  align-items:start;
  gap:8px;
  min-width:0;
  min-height:0;
  padding:10px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--news-ink);
  background:var(--news-surface);
  box-shadow:none;
  opacity:0;
  transform:translate3d(300px,0,0);
  transition:transform 1s var(--drawer-ease),opacity .7s ease,border-color .25s ease;
}

:is(.site-menu, .inner-menu-panel) .menu-news article:nth-of-type(2) { --drawer-order:1; }
:is(.site-menu, .inner-menu-panel) .menu-news article:nth-of-type(3) { --drawer-order:2; }
:is(.site-menu, .inner-menu-panel) .menu-news article:nth-of-type(4) { --drawer-order:3; }

:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-news > .menu-label,
:is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-news article {
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:calc(var(--drawer-order,0) * 80ms);
}

:is(body.menu-closing .site-menu, .inner-menu-panel.is-closing) .menu-news article,
:is(body.menu-closing .site-menu, .inner-menu-panel.is-closing) .menu-news > .menu-label {
  opacity:0;
  transform:translate3d(300px,0,0);
  transition-duration:.9s,.7s,.25s;
  transition-timing-function:cubic-bezier(.45,0,.55,1),ease,ease;
  transition-delay:calc(100ms + var(--drawer-order,0) * 30ms);
}

:is(.site-menu, .inner-menu-panel) .menu-news article:is(:hover,:focus-within) { border-color:var(--news-outline); }

:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-copy,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news .menu-news-copy {
  display:block;
  grid-area:auto;
  align-self:start;
  min-width:0;
  padding:0 23px 0 0;
}

:is(.site-menu, .inner-menu-panel) .menu-news article time {
  display:block;
  margin:0 0 6px;
  color:var(--news-muted);
  font:11px/1.3 'Space Grotesk',sans-serif;
}

:is(.site-menu, .inner-menu-panel) .menu-news article strong {
  display:block;
  max-width:none;
  color:var(--news-ink);
  font:400 12px/1.4 'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;
  overflow-wrap:anywhere;
}

:is(.site-menu, .inner-menu-panel) .menu-news-media {
  display:block;
  grid-area:auto;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:2px;
}

:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-compact,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news .menu-news-compact {
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto minmax(48px,auto);
  column-gap:10px;
  row-gap:8px;
}

:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-compact .menu-news-copy,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news .menu-news-compact .menu-news-copy { display:contents; }
:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-compact time { grid-column:1 / -1; grid-row:1; margin:0; padding-right:23px; }
:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-compact strong { grid-column:2; grid-row:2; align-self:center; }
:is(.site-menu, .inner-menu-panel) .menu-news .menu-news-compact .menu-news-media { grid-column:1; grid-row:2; width:48px; height:48px; aspect-ratio:1; align-self:center; }

:is(.site-menu, .inner-menu-panel) .menu-news article .menu-news-link {
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:inherit;
}

:is(.site-menu, .inner-menu-panel) .menu-news article .menu-news-link:focus-visible { outline:1px solid currentColor; outline-offset:-1px; }

:is(.site-menu, .inner-menu-panel) .menu-news article button,
:is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article button {
  position:absolute;
  z-index:2;
  top:5px;
  right:5px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--news-muted);
  background:transparent;
  font:18px/1 sans-serif;
  opacity:.7;
  transition:opacity .25s ease,background-color .25s ease;
}

:is(.site-menu, .inner-menu-panel) .menu-news article button:is(:hover,:focus-visible) { opacity:1; background:var(--news-outline); }
:is(.site-menu, .inner-menu-panel) .menu-news article button:focus-visible { outline:1px solid currentColor; outline-offset:1px; }

@media (max-width:767px) {
  :is(.site-menu, .inner-menu-panel) .menu-main { transform:translate3d(-36px,0,0); }
  :is(body.menu-closing .site-menu, .inner-menu-panel.is-closing) .menu-main { transform:translate3d(-36px,0,0); }
  :is(.site-menu, .inner-menu-panel) .menu-cases { margin:0 0 6px; }
  :is(.site-menu, .inner-menu-panel) .menu-cases > summary.menu-label { margin:0; font-size:20px; letter-spacing:-.035em; }
  :is(.site-menu, .inner-menu-panel) .menu-news {
    width:100%;
    padding:1px 1px 3px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
  }
  :is(.site-menu, .inner-menu-panel) .menu-news article,
  :is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article,
  :is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news .menu-news-compact {
    flex:0 0 210px;
    grid-template-columns:48px minmax(0,1fr);
    grid-template-rows:auto minmax(48px,auto);
    column-gap:10px;
    row-gap:8px;
    min-height:98px;
    padding:10px;
    scroll-snap-align:start;
    transform:translate3d(32px,0,0);
  }
  :is(.site-menu, .inner-menu-panel) .menu-news article .menu-news-copy,
  :is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article .menu-news-copy { display:contents; }
  :is(.site-menu, .inner-menu-panel) .menu-news article time { grid-column:1 / -1; grid-row:1; margin:0; padding-right:26px; }
  :is(.site-menu, .inner-menu-panel) .menu-news article strong { grid-column:2; grid-row:2; align-self:center; font-size:12px; }
  :is(.site-menu, .inner-menu-panel) .menu-news article .menu-news-media { grid-column:1; grid-row:2; width:48px; height:48px; aspect-ratio:1; align-self:center; }
  :is(.site-menu, .inner-menu-panel) .menu-news article button,
  :is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article button { top:1px; right:1px; width:32px; height:32px; }
  :is(body.menu-drawers-visible:not(.menu-closing) .site-menu, .inner-menu-panel.is-open) .menu-news article { transform:translate3d(0,0,0); }
  :is(body.menu-closing .site-menu, .inner-menu-panel.is-closing) .menu-news article { transform:translate3d(32px,0,0); }
}

@media (prefers-reduced-motion:reduce) {
  :is(.site-menu, .inner-menu-panel) .menu-main,
  :is(.site-menu, .inner-menu-panel) .menu-news > .menu-label,
  :is(.site-menu, .inner-menu-panel) .menu-news article,
  :is(body.menu-active .site-menu, .inner-menu-panel.is-open) .menu-news article,
  :is(.site-menu, .inner-menu-panel) .menu-main nav a::after {
    transform:none!important;
    transition:none!important;
    transition-delay:0s!important;
  }
  :is(.site-menu, .inner-menu-panel) .menu-main nav a::after { opacity:0; }
  :is(.site-menu, .inner-menu-panel) .menu-main nav a:is(:hover,:focus-visible)::after { opacity:1; }
}