.landing-header { background: #fff; border-bottom: 1px solid var(--site-line); }
.landing-nav { display: flex; align-items: center; gap: .65rem; min-height: 4.65rem; position: relative; }
.landing-brand { display: flex; align-items: center; gap: .55rem; margin-inline-end: auto; text-decoration: none; }
.landing-brand img { display: block; flex: none; border-radius: .25rem; }
.landing-brand span { font: 700 clamp(1.2rem, 4vw, 1.75rem)/1 Georgia, serif; white-space: nowrap; }
.landing-brand small { display: block; margin: .28rem 0 0; font: 650 .63rem/1.15 system-ui, sans-serif; }
.landing-language { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, 2.5rem); gap: 0; flex: none; padding: .2rem; border: 1px solid var(--site-line); border-radius: 3rem; background: var(--site-mint); }
.landing-language button { min-height: 2.4rem; min-width: 2.35rem; padding: .2rem .45rem; border-radius: 3rem; background: transparent; color: var(--site-ink); font-size: .8rem; white-space: nowrap; }
.landing-language button[aria-pressed="true"] { background: transparent; color: white; }
.landing-desktop-links { display: none; }
.landing-menu { flex: none; }
.landing-menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--site-pine); color: white; cursor: pointer; list-style: none; }
.landing-menu summary::-webkit-details-marker { display: none; }
.landing-menu-links {
  position: absolute;
  z-index: 3;
  inset: calc(100% + .25rem) 0 auto auto;
  width: min(19rem, 100%);
  max-height: 75dvh;
  overflow: auto;
  padding: .6rem;
  border: 1px solid var(--site-line);
  background: white;
  box-shadow: 0 .75rem 2rem rgb(18 58 50 / .14);
}
.landing-menu-links a { display: block; padding: .65rem .75rem; }
.landing-menu-links a:not(.button):hover { background: var(--site-mint); }

@media (max-width: 42rem) {
  .landing-brand img { width: 2.35rem; height: 2.35rem; }
}
@media (max-width: 24rem) {
  .landing-nav { gap: .45rem; }
  .landing-brand { gap: .4rem; min-width: 0; }
  .landing-brand img { width: 1.9rem; height: 1.9rem; }
  .landing-brand small { font-size: .57rem; white-space: normal; }
}

.landing-language::before { content: ""; position: absolute; z-index: -1; top: .2rem; bottom: .2rem; left: .2rem; width: 2.5rem; border-radius: 3rem; background: var(--site-pine); transform: translateX(0); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.landing-language[data-language="zh-hans"]::before { transform: translateX(100%); }
.landing-language[data-language="zh-hans"] button[value="en-us"],
.landing-language[data-language="en-us"] button[value="zh-hans"] { color: var(--site-ink); }
.landing-language[data-language="zh-hans"] button[value="zh-hans"],
.landing-language[data-language="en-us"] button[value="en-us"] { color: white; }
.landing-language button { transition: color 180ms ease; }
.landing-book { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1rem; min-height: 2.75rem; background: var(--site-mint); color: var(--site-pine); text-decoration: none; font-size: .85rem; font-weight: 650; white-space: nowrap; }
.landing-book:hover { background: var(--site-pine); color: white; }
@media (min-width: 75rem) {
  .landing-nav { gap: clamp(.65rem, 1.1vw, 1rem); }
  .landing-desktop-links { display: flex; align-items: center; gap: clamp(.7rem, 1.05vw, 1rem); flex: none; }
  .landing-desktop-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--site-ink); font-size: .8rem; text-decoration: none; white-space: nowrap; }
  .landing-desktop-links a:hover, .landing-desktop-links a[aria-current="page"] { color: var(--site-pine); text-decoration: underline; text-underline-offset: .3em; }
  .landing-menu { display: none; }
}
@media (max-width: 42rem) {
  .landing-nav { flex-wrap: wrap; padding-block: .65rem; }
  .landing-book { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-language::before, .landing-language button { transition: none; }
}
@media (max-width: 24rem) {
  .landing-brand span { font-size: 1.1rem; }
  .landing-nav { column-gap: .25rem; }
}

.landing-language a { display: grid; place-items: center; min-height: 2.4rem; padding: .2rem; font-size: .8rem; color: var(--site-ink); text-decoration: none; }
.landing-language a[aria-current="page"] { color: white; }
.landing-language:has(a:only-child)::before { display: none; }
.landing-language a:only-child { color: var(--site-ink); }