/* StitchDuck site styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light dark;
  --page-from: #FFF7E3; --page-to: #FCEBC4;
  --panel: #FEF7E9; --card: #FFFFFF; --bar: rgba(255, 250, 236, .88);
  --heading: #423B38; --body: #554D49; --muted: #726864; --eyebrow: #948A84;
  --accent: #E8804A; --accent-text: #A65A41; --on-accent: #FFFFFF;
  --border: #F0E3C6; --divider: #F3E7CB; --border-strong: #D9CDB6;
  --candy-blue: #DAE8F1; --on-candy-blue: #4B6988;
  --candy-pink: #FECFC9; --on-candy-pink: #904B49;
  --candy-peach: #FEBC9A; --on-peach: #774B2B;
  --candy-butter: #FEE2A3; --on-candy-butter: #75591C;
  --soft-fill: #FFF2DF; --soft-border: #FFDDB0;
  --badge-bg: #2C2823; --badge-fg: #FFFFFF;
  --frame-bg: #FFFDF6;
  --grid-line: rgba(180, 165, 136, .30);
  --shadow-accent: 0 6px 16px -6px rgba(226, 155, 95, .5);
  --shadow-hero: 0 10px 24px -10px rgba(226, 155, 95, .6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-from: #241C15; --page-to: #1C150F;
    --panel: #2B2219; --card: #322820; --bar: rgba(36, 28, 21, .88);
    --heading: #F3EAE0; --body: #D8CCC0; --muted: #B3A597; --eyebrow: #8F8172;
    --accent: #E8804A; --accent-text: #EDA177;
    --border: #3E3227; --divider: #3A2F24; --border-strong: #544434;
    --candy-blue: #2F3B47; --on-candy-blue: #A9C6DE;
    --candy-pink: #452F31; --on-candy-pink: #F3B8B4;
    --candy-peach: #473425; --on-peach: #F1BE9C;
    --candy-butter: #453B20; --on-candy-butter: #EFD794;
    --soft-fill: #3A2E21; --soft-border: #544434;
    --badge-bg: #F3EAE0; --badge-fg: #241C15;
    --grid-line: rgba(255, 255, 255, .06);
    --shadow-accent: 0 6px 16px -8px rgba(0, 0, 0, .5);
    --shadow-hero: 0 10px 24px -12px rgba(0, 0, 0, .6);
  }
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--body);
  background: linear-gradient(180deg, var(--page-from), var(--page-to));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
main { flex: 1; min-width: 0; }
h1, h2, h3, .brand-name {
  font-family: 'Newsreader', Georgia, 'Songti SC', 'Songti TC', serif;
  color: var(--heading);
  font-weight: 600;
}
a { color: var(--accent-text); }

/* Newsreader and Work Sans cover Latin only. The default fallbacks above are
   Simplified Chinese faces, which would draw Traditional Chinese and Japanese
   text with mainland glyph shapes and have no good Cyrillic or Hangul, so those
   languages name their own fallbacks. */
body:lang(zh-Hant) { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'PingFang SC', sans-serif; }
:lang(zh-Hant) :is(h1, h2, h3, .brand-name) { font-family: 'Newsreader', Georgia, 'Songti TC', 'Songti SC', serif; }
body:lang(ja) { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif; }
:lang(ja) :is(h1, h2, h3, .brand-name) { font-family: 'Newsreader', Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }
body:lang(ko) { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
:lang(ko) :is(h1, h2, h3, .brand-name) { font-family: 'Newsreader', Georgia, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
body:is(:lang(ru), :lang(uk)) { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
:is(:lang(ru), :lang(uk)) :is(h1, h2, h3, .brand-name) { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
/* Korean breaks lines between words, not inside them. */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
/* German, Polish, Russian and Ukrainian have words wider than a phone at heading size; let them hyphenate rather than push the page sideways. */
:is(:lang(de), :lang(pl), :lang(ru), :lang(uk)) :is(h1, h2) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}
.header-inner {
  max-width: 1020px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  /* Safety net: on ultra-narrow screens the nav drops to a second row instead of
     spilling past the right edge. A no-op at every width where the row fits. */
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand img { width: 32px; height: 32px; display: block; flex: none; }
.brand-name { font-size: 20px; line-height: 1; }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; align-items: center; }
.site-nav > a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.site-nav > a:hover { background: var(--soft-fill); color: var(--accent-text); }
.site-nav > a.active { background: var(--soft-fill); color: var(--accent-text); }
.nav-menu { position: relative; }
.nav-menu > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; line-height: inherit; white-space: nowrap;
}
.nav-menu > button svg { transition: transform .15s ease; flex: none; }
.nav-menu > button:hover, .nav-menu > button.active, .nav-menu.open > button { background: var(--soft-fill); color: var(--accent-text); }
.nav-menu.open > button svg { transform: rotate(180deg); }
.lang-menu { position: relative; margin-left: 8px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--muted); font-size: 13px; font-family: inherit; line-height: 1.3;
  white-space: nowrap;
}
.lang-short { display: none; }
.lang-btn svg { transition: transform .15s ease; flex: none; }
.lang-btn:hover { color: var(--accent-text); border-color: var(--accent); }
.lang-menu.open .lang-btn { color: var(--accent-text); border-color: var(--accent); }
.lang-menu.open .lang-btn svg { transform: rotate(180deg); }
.lang-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 138px; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-hero);
}
.lang-pop a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  color: var(--body); font-size: 14px; line-height: 1.3;
}
.lang-pop a::after { content: "✓"; font-weight: 700; opacity: 0; }
.lang-pop a:hover { background: var(--soft-fill); color: var(--accent-text); }
.lang-pop a[aria-current] { color: var(--accent-text); font-weight: 600; }
.lang-pop a[aria-current]::after { opacity: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 20px 52px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 38%, #000 25%, transparent 74%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 38%, #000 25%, transparent 74%);
}
.hero > * { position: relative; }
.hero-frame {
  display: inline-block; padding: 20px; margin-bottom: 26px;
  background: var(--frame-bg); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-hero);
}
.hero-frame img { width: 128px; height: 128px; display: block; }
.hero h1 { font-size: clamp(34px, 6vw, 54px); line-height: 1.12; letter-spacing: -.01em; }
/* Ten full-width characters to a line: size the Japanese headline so that line fits a phone. */
:lang(ja) .hero h1 { font-size: clamp(26px, 8vw, 54px); line-height: 1.25; letter-spacing: 0; }
.hero .sub {
  margin: 16px auto 30px; max-width: 620px;
  font-size: 17.5px; line-height: 1.6; color: var(--muted);
  text-wrap: balance;
}
.store-badge {
  display: inline-flex; align-items: center; gap: 11px; text-align: left;
  background: var(--badge-bg); color: var(--badge-fg);
  padding: 10px 22px 12px; border-radius: 14px; text-decoration: none;
  box-shadow: var(--shadow-accent);
}
.store-badge:hover { transform: translateY(-1px); }
.store-badge svg { width: 21px; height: 26px; fill: currentColor; flex: none; }
.store-badge .small { display: block; font-size: 11px; opacity: .8; line-height: 1.2; }
.store-badge .big { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; }
/* Google's badges set the verb in capitals. */
.store-badge[data-store="google"] .small { letter-spacing: .04em; }
/* The big store name goes on top and the verb under it wherever the store's own
   badge does that: Apple's in Korean and Turkish, Google's in Traditional Chinese,
   Japanese and Korean. */
:is(:lang(ko), :lang(tr)) .store-badge[data-store="apple"] > span,
:is(:lang(zh-Hant), :lang(ja), :lang(ko)) .store-badge[data-store="google"] > span { display: flex; flex-direction: column-reverse; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--eyebrow); text-wrap: balance; }
/* Each part between the dots stays whole, so a phone breaks the note between parts
   rather than inside one (Chinese would otherwise split 通用 as 通 / 用). */
.hero-note .seg { white-space: nowrap; }
/* Google Play can't be reached from mainland China, which gets an Android release of its own
   later. The mainland China edition (/cn/, marked .mainland-edition by _src/build.py) shows
   Android as still to come instead of the Google Play badge; the international pages show the
   badge to everyone, wherever they are. */
html:not(.mainland-edition) .mainland-only, .mainland-edition .outside-mainland-only { display: none; }
/* The store badges plus the platforms still to come, on one row where they fit. */
.platforms { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; }
.store-soon {
  display: inline-flex; align-items: center; gap: 11px; text-align: left;
  color: var(--muted); border: 1px dashed var(--border-strong);
  padding: 9px 20px 11px; border-radius: 14px;
}
.store-soon svg { width: 22px; height: 22px; fill: currentColor; flex: none; opacity: .75; }
.store-soon .small { display: block; font-size: 11px; opacity: .8; line-height: 1.2; }
.store-soon .big { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; }
/* Too narrow for one row: every button gets a row to itself (two badges side by side
   don't fit a phone in every language; Korean's "Google Play에서" is the widest),
   except that on the mainland China edition the two platforms still to come share one, so
   neither is left dangling on its own. */
@media (max-width: 640px) {
  .platforms { display: grid; grid-template-columns: 1fr 1fr; max-width: 340px; margin: 0 auto; }
  .store-badge, .store-soon { grid-column: 1 / -1; justify-content: center; }
  .mainland-edition .store-soon { grid-column: auto; min-width: 0; padding: 9px 10px 11px; gap: 9px; }
}
@media (max-width: 360px) {
  .mainland-edition .store-soon { padding: 9px 6px 11px; gap: 7px; }
  .mainland-edition .store-soon svg { width: 18px; height: 18px; }
  .mainland-edition .store-soon .small { font-size: 10.5px; }
  .mainland-edition .store-soon .big { font-size: 17px; }
}
/* ---------- Download toast ---------- */
/* Filled in and shown by platform.js when the App Store badge can't get
   anywhere; the copy-the-address row only appears on iPhone/iPad outside
   Safari, the one case the visitor can act on. */
.toast {
  position: fixed; z-index: 100;
  left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: start;
  padding: 14px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-hero);
  font-size: 13.5px; line-height: 1.5; color: var(--body); text-align: left;
  opacity: 0; transform: translateX(-50%) translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-msg { grid-column: 1; }
.toast-close {
  grid-column: 2; grid-row: 1; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -3px -4px 0 0;
  padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted);
}
.toast-close:hover { background: var(--soft-fill); color: var(--accent-text); }
.toast-copy { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.toast-copy[hidden] { display: none; }
.toast-url {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  -webkit-user-select: all; user-select: all;
  padding: 7px 10px; border-radius: 8px;
  background: var(--soft-fill); border: 1px solid var(--soft-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--heading);
}
.toast-copy-btn {
  flex: none; cursor: pointer; border: 0; border-radius: 8px; padding: 8px 14px;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.toast-hint { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.toast-hint[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: translateX(-50%); }
  .toast.show { transform: translateX(-50%); }
}

/* ---------- Screenshots ---------- */
/* One swipeable row at every width. It runs the full width of the window while
   its first card lines up with the page column, so the next card always peeks
   in from the edge. */
.shots {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 0 max(20px, calc(50% - 490px)) 16px;
  scroll-snap-type: x mandatory; scroll-padding: 0 max(20px, calc(50% - 490px));
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 min(84%, 560px); scroll-snap-align: start;
  overflow: hidden; border-radius: 15px; border: 1px solid var(--border);
  background: var(--panel); box-shadow: var(--shadow-accent);
}
.shot img { display: block; width: 100%; height: auto; }
/* A mouse can't swipe, so shots.js shows buttons that step through the row. */
.shots-nav { max-width: 1020px; margin: 0 auto; padding: 4px 20px 0; display: flex; justify-content: flex-end; gap: 10px; }
.shots-nav[hidden] { display: none; }
.shots-nav button {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
}
.shots-nav button:hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent); }
.shots-nav button:disabled { opacity: .4; cursor: default; }
@media (hover: none), (pointer: coarse) {
  .shots-nav { display: none; }
}
@media (max-width: 640px) {
  /* Phones centre the card they land on, with a sliver of its neighbours either side. */
  .shots { gap: 12px; }
  .shot { scroll-snap-align: center; }
}

/* ---------- Feature cards ---------- */
.features {
  max-width: 1020px; margin: 0 auto; padding: 20px 20px 8px;
  /* min() keeps the 280px track from outgrowing the viewport on very narrow screens. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px;
}
.card { border-radius: 15px; padding: 22px 22px 24px; }
.card h2 { font-size: 20px; margin-bottom: 7px; }
.card p { font-size: 14.5px; line-height: 1.6; }
.card.blue   { background: var(--candy-blue);   } .card.blue h2   { color: var(--on-candy-blue); }
.card.pink   { background: var(--candy-pink);   } .card.pink h2   { color: var(--on-candy-pink); }
.card.peach  { background: var(--candy-peach);  } .card.peach h2  { color: var(--on-peach); }
.card.butter { background: var(--candy-butter); } .card.butter h2 { color: var(--on-candy-butter); }

/* ---------- Pricing strip ---------- */
.pricing {
  max-width: 1020px; margin: 24px auto 0; padding: 0 20px;
}
.pricing-inner {
  background: var(--panel); border: 1px solid var(--border); border-radius: 15px;
  padding: 34px 28px; text-align: center;
}
.pricing h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; }
.pricing p { max-width: 640px; margin: 0 auto; font-size: 15.5px; line-height: 1.65; }
.pricing .pricing-own { margin-top: 12px; color: var(--heading); font-weight: 600; text-wrap: balance; }

/* ---------- Inner pages (support / privacy) ---------- */
/* An explicit width: with auto margins a flex item would otherwise size to its content, and a wide table could push it past the viewport. */
.page { width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 20px 24px; }
.page h1 { font-size: clamp(30px, 5vw, 40px); margin-bottom: 10px; }
.page .lead { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-bottom: 28px; }
.eyebrow {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--eyebrow); font-weight: 600; margin-bottom: 10px;
}
.contact-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  padding: 26px; margin-bottom: 36px; box-shadow: var(--shadow-accent);
}
.contact-card p { font-size: 15px; line-height: 1.65; }
.contact-card .email-row { margin: 14px 0 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 10px;
  text-decoration: none; box-shadow: var(--shadow-accent);
}
.btn:hover { filter: brightness(1.05); }
.email-addr { font-size: 15px; color: var(--accent-text); word-break: break-all; }
.hint { font-size: 13.5px; color: var(--muted); }

.page h2 { font-size: 23px; margin: 34px 0 10px; }
.page p, .page li { font-size: 15px; line-height: 1.7; }
.page ul { padding-left: 22px; margin: 8px 0; }
.page section p + p { margin-top: 8px; }

.faq details { border-bottom: 1px solid var(--divider); padding: 4px 0; }
.faq summary {
  cursor: pointer; padding: 13px 0; font-weight: 600; font-size: 16px;
  color: var(--heading); list-style-position: outside;
}
.faq summary::marker { color: var(--accent); }
.faq details p, .faq details ul { padding: 2px 0 16px; }

/* ---------- Fabric calculator ---------- */
.calc {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  padding: 24px; margin-bottom: 12px; box-shadow: var(--shadow-accent);
}
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; min-width: 0; }
.calc input, .calc select {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--heading); font: inherit; font-size: 16px; line-height: 1.3;
}
.field-row select { width: auto; flex: none; }
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.calc-results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px;
  margin-top: 20px;
}
.result { background: var(--soft-fill); border: 1px solid var(--soft-border); border-radius: 12px; padding: 14px 16px; }
.result-label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--eyebrow); margin-bottom: 4px; }
.result output {
  display: block; font-family: 'Newsreader', Georgia, 'Songti SC', 'Songti TC', serif;
  font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--heading);
}
.calc .hint { margin-top: 14px; }
.table-wrap { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.calc-table thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.calc-table tbody th { font-weight: 600; color: var(--heading); }
.calc-table tr.current { background: var(--soft-fill); }
.calc-table tr.current th, .calc-table tr.current td { color: var(--accent-text); font-weight: 600; }
.calc-cta { margin-top: 36px; margin-bottom: 0; }

.tldr {
  background: var(--soft-fill); border: 1px solid var(--soft-border);
  border-radius: 12px; padding: 18px 20px; margin: 18px 0 8px;
}
.tldr p { font-size: 15px; line-height: 1.65; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--divider); margin-top: 56px;
  padding: 26px 20px 38px; text-align: center;
  font-size: 13px; color: var(--eyebrow); line-height: 2;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-text); text-decoration: underline; }
.footer-langs a[aria-current] { color: var(--accent-text); }
.footer-legal { max-width: 760px; margin: 14px auto 0; font-size: 11.5px; line-height: 1.65; opacity: .85; }
/* Mainland China's filing numbers (ICP_FILING in _src/build.py), on the mainland China edition only. */
.footer-filing { margin-top: 10px; font-size: 12px; }
.footer-filing a { white-space: nowrap; }
.footer-filing img { height: 16px; width: auto; margin-right: 4px; vertical-align: -3px; }
/* The mainland China edition's way out to the international site (edition_link in _src/build.py). */
.footer-edition { margin-top: 10px; }

@media (max-width: 560px) {
  .header-inner { gap: 8px; }
  .site-nav > a, .nav-menu > button { padding: 8px 6px; font-size: 13px; }
  .nav-menu > button { gap: 4px; }
  .lang-menu { margin-left: 4px; }
  .lang-btn { padding: 6px 10px; font-size: 12.5px; gap: 6px; }
  .hero { padding-top: 44px; }
  .hero-frame img { width: 104px; height: 104px; }
}

/* Below ~560px the wordmark can no longer share a row with the nav and the
   language menu, so the logo carries the brand on phones. Under 360px even the
   logo-only row won't fit, so the wordmark comes back and the header wraps to
   two rows rather than leaving a lone logo on the first one. */
@media (min-width: 360px) and (max-width: 560px) {
  .brand-name { display: none; }
}
/* With four items a phone header has no room to spare: the logo stands in for the Home
   link, the language button shows a short code, and the Tools button drops its chevron. */
@media (max-width: 720px) {
  .site-nav > a:first-of-type { display: none; }
  .lang-full, .nav-menu > button svg { display: none; }
  .lang-short { display: inline; }
}
@media (max-width: 400px) {
  .header-inner { gap: 6px; }
  .site-nav > a, .nav-menu > button { padding: 8px 5px; }
  .lang-menu { margin-left: 2px; }
  .lang-btn { padding: 6px 8px; gap: 5px; }
  :is(:lang(ru), :lang(uk)) :is(.site-nav > a, .nav-menu > button) { padding: 8px 3px; }
}