/* The language picker in the footer, the one-time "switched" note, and per-language touches. */
.langbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:8px;padding-bottom:6px}
.langpick{position:relative}
.langpick summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1.5px solid #6b6556;border-radius:9px;background:#1f1f18;color:#faf6ec;font:13px/1 var(--sans);cursor:pointer;box-shadow:inset 1px 1px 0 rgba(255,253,246,.14);transition:background .2s,transform .22s var(--ease)}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{background:#2b2a20}
.langpick summary:active{transform:translateY(1px) scale(.98)}
.langpick summary:focus-visible{outline:0;box-shadow:var(--focus)}
.langpick summary span{font-size:15px;line-height:1;display:inline-block;transition:transform .5s var(--spring)}
.langpick[open] summary span{transform:rotate(25deg) scale(1.12)}
.langpick summary b{font-weight:500}
.langlist{position:absolute;inset-inline-start:0;bottom:calc(100% + 8px);z-index:30;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:min(560px,calc(100vw - 32px));padding:8px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--box2);animation:langin .22s var(--spring) both;transform-origin:bottom left}
@keyframes langin{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.langlist a{display:block;padding:8px 10px;border-radius:6px;font:14px/1.25 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.langlist a:hover,.langlist a:focus-visible{background:var(--box);outline:0}
.langlist a[aria-current]{background:var(--ink);color:var(--paper)}
.langnote{margin:0;font:12.5px/1.4 var(--sans);color:#c9c3b2;max-width:46ch}
.langnote.legal{margin:14px auto 0;padding:10px 14px;background:var(--box);color:var(--ink);border:1.5px solid var(--ink);border-radius:9px;max-width:1040px;font-size:13px}
.langnote.legal a{text-decoration:underline;text-underline-offset:3px}
.langauto{position:fixed;inset-inline:16px;bottom:16px;z-index:60;margin:0 auto;width:fit-content;max-width:min(520px,calc(100vw - 32px));padding:11px 16px;background:var(--ink);color:var(--paper);border:1.5px solid var(--paper);border-radius:9px;box-shadow:3px 3px 0 rgba(0,0,0,.25);font:13px/1.4 var(--sans);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .4s var(--spring)}
.langauto.show{opacity:1;transform:none}
.langauto a{text-decoration:underline;text-underline-offset:3px;margin-inline-start:8px}
@media (max-width:640px){.langlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.langlist,.langauto{animation:none;transition:none}.langpick summary span{transition:none}}
/* Fonts for scripts the page font does not cover. The first name is a Mac font. */
:root:lang(ja){--serif:"Hiragino Mincho ProN","Yu Mincho","EB Garamond",serif;--sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Geneva,sans-serif}
:root:lang(ko){--serif:"Apple SD Gothic Neo","Nanum Myeongjo","EB Garamond",serif;--sans:"Apple SD Gothic Neo","Malgun Gothic",Geneva,sans-serif}
:root:lang(zh-Hans){--serif:"Songti SC","STSong","EB Garamond",serif;--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Geneva,sans-serif}
:root:lang(ar){--serif:"Geeza Pro","Damascus","Baghdad",serif;--sans:"Geeza Pro","Arial",sans-serif}
:root:lang(ru) h1,:root:lang(uk) h1,:root:lang(ja) h1,:root:lang(ko) h1,:root:lang(zh-Hans) h1,:root:lang(ar) h1{letter-spacing:0}
:root:lang(de) h1,:root:lang(nl) h1,:root:lang(pl) h1,:root:lang(lt) h1,:root:lang(tr) h1{hyphens:auto}

.langhint{margin:10px auto -6px;font:12.5px/1.4 var(--sans);color:var(--mute);text-align:start}
/* Longer words than English: when the top bar runs out of room it takes a second row instead of running off the screen. */
@media (max-width:1180px){
  html:not([lang=en]) .topin{flex-wrap:wrap;height:auto;min-height:56px;padding-top:4px;padding-bottom:4px;row-gap:0}
  html:not([lang=en]) .topin nav{flex-wrap:wrap;min-width:0;row-gap:0}
  /* The filter pills on Browse and the like wrap instead of making the page wider. */
  html:not([lang=en]) .browsebar{flex-wrap:wrap}
  html:not([lang=en]) .browsebar .filters,html:not([lang=en]) .filters{flex-wrap:wrap;min-width:0;max-width:100%}
}
/* Longer words than English: on a phone the top bar may take a second row instead of running off the screen. */
@media (max-width:560px){
  html:not([lang=en]) .topin{flex-wrap:wrap;height:auto;min-height:56px;padding-top:4px;padding-bottom:4px;row-gap:0}
  html:not([lang=en]) .topin .logo{order:1}
  html:not([lang=en]) .topin .btngo{order:2;margin-inline-start:auto}
  html:not([lang=en]) .topin nav{order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:space-between;min-width:0;row-gap:0;margin-top:-6px}
  /* The dropdowns open under the whole top bar, so a long label never pushes one off the screen. */
  html:not([lang=en]) .menu{position:static}
  html[lang]:not([lang=en]) .menu .menubox{left:12px;right:12px;width:auto;top:100%;margin-top:4px}
}
/* A longer word on the top bar buttons never gets squeezed. */
html:not([lang=en]) .topin .btngo,html:not([lang=en]) .topin .topsponsor{flex:none;white-space:nowrap}