@charset "utf-8";
/* ==========================================================================
   Hostonym — language switcher, and the page in the other direction.

   Loaded from header.php on every page, after main.css. Two jobs:

     1. the switcher, which renders nothing at all while the site is published
        in one language, so today this stylesheet has nothing to style
     2. the RTL overrides, behind [dir="rtl"], which never match while the page
        is ltr

   Both halves are therefore inert on the site as it ships, which is the whole
   reason they are in a file of their own rather than woven into main.css. That
   stylesheet is a tuned thing with eight kilobytes of comments explaining why
   each measurement is what it is, and the safest change to make to it while
   preparing for a language nobody has added yet is none.

   ── On the RTL half ─────────────────────────────────────────────────────────

   The right answer in the long run is logical properties throughout main.css:
   margin-inline-start rather than margin-left, inset-inline-start rather than
   left. That is a seventy-declaration edit to a stylesheet with no visual
   regression test behind it, and it would be made blind, so it is deliberately
   not made here. What is here instead flips the declarations that decide which
   way the page reads, on a selector that cannot match unless an RTL language is
   switched on. When one is, this is what makes the page legible on the first
   day; converting main.css to logical properties afterwards is a cleanup that
   can be done a section at a time with something to compare against.
   ========================================================================== */

/* ---------------------------------------------------------- 1. the switcher */

.lang-sw{position:relative;display:inline-flex;align-items:center}

.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 6px;background:transparent;border:0;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;
}
.lang-btn:hover{color:var(--ink)}
.lang-btn .flag{width:16px;height:12px}

/* the code, for a language whose flag this estate has not drawn */
.lang-cc{
  font:500 10px/1 var(--f-mono);letter-spacing:.08em;
  padding:2px 4px;border:1px solid var(--rule-2);color:var(--mute);
}
.lang-btn-n{white-space:nowrap}

.lang-chev{
  width:7px;height:7px;border-right:1.2px solid currentColor;
  border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-1px);
  opacity:.65;
}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(225deg) translateY(-1px)}

.lang-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;
  min-width:190px;max-height:62vh;overflow-y:auto;
  margin:0;padding:5px;list-style:none;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 10px 30px rgb(11 13 16 / 10%);
}
.lang-menu[hidden]{display:none}

.lang-opt{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;text-decoration:none;color:var(--ink-2);
  font:400 var(--fs-sm)/1.3 var(--f-sans);
}
.lang-opt:hover{background:var(--paper-2);color:var(--ink)}
.lang-opt.is-on{color:var(--ink);font-weight:500}
.lang-opt.is-on::after{content:"\2713";margin-inline-start:auto;opacity:.7}
.lang-opt-n{white-space:nowrap}

/* the drawer and the footer, where a list beats a popup */
.lang-list{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin:0;padding:0;list-style:none;
}
.lang-list-a{
  text-decoration:none;color:var(--mute);
  font:400 var(--fs-sm)/1.4 var(--f-sans);
}
.lang-list-a:hover{color:var(--ink)}
.lang-list-a.is-on{color:var(--ink);font-weight:500}

.dw-lang-h{margin:0 0 8px}
.lang-list--dw{padding:2px 0 14px}
/* padding-block, not the padding shorthand: the shorthand zeroed the .wrap
   gutter, so this one row started 52 px left of everything above it */
.ft-lang{padding-block:18px 4px;border-top:1px solid var(--rule)}
.ft-lang .lbl{margin:0 0 8px}

/* ------------------------------------------------------- 2. right to left */

[dir="rtl"]{direction:rtl}

/* Text that is set flush to one edge follows the reading direction. */
[dir="rtl"] .sh-note,
[dir="rtl"] .sec-l,
[dir="rtl"] .pol-intro,
[dir="rtl"] .hb-price,
[dir="rtl"] .ft-legal-in,
[dir="rtl"] th,
[dir="rtl"] td{text-align:right}

/* A figure in a table stays flush to the reading edge rather than the left. */
[dir="rtl"] .num,
[dir="rtl"] .pr,
[dir="rtl"] .mono-s{direction:ltr;unicode-bidi:embed}

/* Rules, bars and accents drawn on one side move to the other. */
[dir="rtl"] .prin-i,
[dir="rtl"] .line-l li,
[dir="rtl"] .kb-e,
[dir="rtl"] blockquote,
[dir="rtl"] .rail-note{
  border-left:0;
  border-right:1px solid var(--rule);
  padding-left:0;
  padding-right:18px;
}

/* Anything that leans on a hard left/right offset. */
[dir="rtl"] .mega-p,
[dir="rtl"] .drawer,
[dir="rtl"] .lang-menu{left:auto;right:0}
[dir="rtl"] .hd-u-r,
[dir="rtl"] .ft-legal-l,
[dir="rtl"] .nav-l{flex-direction:row-reverse}

/* An arrow means "onward", and onward is the other way. */
[dir="rtl"] .btn-ar,
[dir="rtl"] .lnk-ar,
[dir="rtl"] .pcard-ar{transform:scaleX(-1)}

/* A checkmark is not an arrow and must not be flipped with them. */
[dir="rtl"] .lang-opt.is-on::after{transform:none}

/* The drawer slides in from the reading edge. */
[dir="rtl"] .drawer{transform-origin:right center}

/* Latin runs inside RTL prose — a hostname, a command, a ticker — keep their
   own direction so a full stop does not migrate to the front of the line. */
[dir="rtl"] code,
[dir="rtl"] samp,
[dir="rtl"] kbd,
[dir="rtl"] .cc,
[dir="rtl"] .coin,
[dir="rtl"] .lg-t{direction:ltr;unicode-bidi:isolate;text-align:left}

/* ------------------------------------------------- 3. Simplified Chinese */

/* Not one of the three Latin families has a Han character in it, so every
   Chinese glyph on a /zh page comes from whatever the stack names next. On a
   Chinese Windows machine the generic `serif` at the end of --f-serif is
   SimSun, a bitmap-era Song face with a synthesised bold: card headings came
   out thin and spindly beside a hero set in YaHei, two typefaces on one screen
   for no reason a reader could see. These stacks name a proper CJK face for
   every platform before any generic is reached — a real Song where the OS ships
   one worth using (macOS, and Linux or Android with Noto CJK) and Microsoft
   YaHei on Windows rather than SimSun. Latin words inside a Chinese sentence
   still render in Source Serif and Plex, which is how Chinese editorial sites
   pair the two scripts. */
html:lang(zh){
  --f-serif:'Source Serif 4','Source Serif 4 fallback','Noto Serif SC','Source Han Serif SC','Noto Serif CJK SC','Songti SC','STSong','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC',sans-serif;
  --f-sans:'IBM Plex Sans','IBM Plex Sans fallback','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','Noto Sans CJK SC',sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Mono fallback',ui-monospace,'SF Mono',Menlo,Consolas,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',monospace;
  /* eleven pixels is a Latin caption size; a Han character needs twelve to keep
     its inner strokes apart */
  --fs-micro:.75rem;
}

/* Tracking is a Latin device. Applied to Han it reads as 离 岸 基 础 设 施 —
   characters standing apart like a ransom note — so it is switched off for the
   whole page, headings included (their negative tracking crowds Han glyphs
   into each other just as badly). */
html:lang(zh) body *{letter-spacing:normal !important}

/* Han has no italic. A browser asked for one slants the glyphs mechanically,
   which no Chinese typesetter would ever do; emphasis is weight instead. */
html:lang(zh) em,
html:lang(zh) i,
html:lang(zh) cite,
html:lang(zh) [style*="italic"]{font-style:normal}
html:lang(zh) em{font-weight:600}

/* A little more air between lines: Han glyphs fill the whole em box, Latin
   ones do not, so the same leading looks tighter in Chinese. */
html:lang(zh) body{line-height:1.75}
html:lang(zh) p{line-break:strict;word-break:normal}

/* ------------------------------------------------------------- 4. Russian */

/* Russian runs a third longer than English and its words are longer too, so
   the widest tracking on the uppercase labels is eased off a little: the hero
   kicker no longer breaks a word-group across two lines on a phone. */
html:lang(ru) .kick,
html:lang(ru) .kick--on,
html:lang(ru) .lbl{letter-spacing:.1em}
html:lang(ru) h1,
html:lang(ru) h2{hyphens:manual;overflow-wrap:break-word}

/* ------------------------------------- 5. "this page is in your language" */

/* One line above the masthead, in the visitor's language rather than the
   page's; see i18n_suggest_banner(). Ink on paper inverted so it reads as a
   notice and not as part of the page it sits on. */
.lang-sug{background:var(--ink);color:var(--paper);font:400 var(--fs-sm)/1.45 var(--f-sans)}
.lang-sug[hidden]{display:none}
.lang-sug[lang^="zh"]{font-family:'IBM Plex Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
.lang-sug-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;padding-block:7px}
.lang-sug-t{margin:0}
.lang-sug-a{
  display:inline-flex;align-items:center;gap:.45em;margin-inline-start:.5em;
  color:var(--paper);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--brass-2);transition:border-color .16s var(--ease);
}
.lang-sug-a:hover{border-bottom-color:var(--paper)}
.lang-sug-x{
  flex:none;display:grid;place-items:center;width:36px;height:36px;margin-inline-end:-8px;
  color:rgba(251,250,246,.72);font-size:22px;line-height:1;
}
.lang-sug-x:hover{color:var(--paper)}