/* ============================================================
   Control Flex Wiki — shared stylesheet
   Light + dark theme, all colors routed through CSS variables.
   ============================================================ */

:root {
  color-scheme: light;

  --bg: #f6f8fa;
  --bg-soft: #eef1f5;
  --panel: #ffffff;
  --panel-2: #f2f4f8;
  --ink: #171c26;
  --ink-soft: #3c4554;
  --muted: #5f6b7d;
  --line: #e3e7ee;
  --line-strong: #ccd3de;

  --accent: #17915a;
  --accent-strong: #0f7346;
  --accent-soft: #e6f6ee;
  --accent-ink: #0d6a41;
  --link: #0f7346;

  --header-bg: rgba(18, 23, 32, .92);
  --header-solid: #121720;
  --header-ink: #eef2f8;
  --header-muted: #9fabbf;

  --code-bg: #0f141d;
  --code-ink: #e2e9f3;
  --chip-bg: #eef1f6;
  --chip-ink: #33405a;

  --hover-row: #f8fafc;
  --hover-nav: #e9edf3;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 10px 26px rgba(13, 21, 34, .12), 0 3px 8px rgba(13, 21, 34, .06);

  --note: #2160a8;
  --note-bg: #ebf3fc;
  --note-line: #bcd6f2;
  --warn: #9a6700;
  --warn-bg: #fdf6e3;
  --warn-line: #eed9a4;
  --tip: #0f7346;
  --tip-bg: #e6f6ee;
  --tip-line: #b8e6cd;
  --danger: #b42318;
  --danger-bg: #fdf0ee;

  --radius: 12px;
  --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0d1117;
    --bg-soft: #12171f;
    --panel: #161b23;
    --panel-2: #1b212b;
    --ink: #e6ebf3;
    --ink-soft: #c3cbd8;
    --muted: #97a3b5;
    --line: #242c38;
    --line-strong: #33404f;

    --accent: #35c07c;
    --accent-strong: #5ed69b;
    --accent-soft: rgba(53, 192, 124, .12);
    --accent-ink: #7fe0ac;
    --link: #62d79c;

    --header-bg: rgba(13, 17, 23, .92);
    --header-solid: #0d1117;
    --header-ink: #eef2f8;
    --header-muted: #97a3b5;

    --code-bg: #0a0e14;
    --code-ink: #dbe5f1;
    --chip-bg: #1e2530;
    --chip-ink: #c6d0de;

    --hover-row: #1a212b;
    --hover-nav: #1d2530;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lift: 0 10px 26px rgba(0, 0, 0, .45);

    --note: #7cb1ee;
    --note-bg: rgba(46, 111, 194, .14);
    --note-line: rgba(92, 146, 220, .4);
    --warn: #e3b341;
    --warn-bg: rgba(187, 128, 9, .14);
    --warn-line: rgba(187, 128, 9, .4);
    --tip: #5ed69b;
    --tip-bg: rgba(53, 192, 124, .12);
    --tip-line: rgba(53, 192, 124, .35);
    --danger: #f0847c;
    --danger-bg: rgba(180, 35, 24, .15);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(23, 145, 90, .2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- language switcher ----------
   Each language is its own static tree (/<lang>/...), so switching is a plain
   link. Adding a language needs no change here. */

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 22px;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--header-ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--header-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .1px;
  white-space: nowrap;
}

.brand:hover { text-decoration: none; opacity: .94; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, #2bb673, #128a52);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(0, 0, 0, .28);
}

.brand-text { font-size: 15.5px; }

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.topnav a {
  color: var(--header-muted);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .15s;
}
.topnav a:hover { color: #fff; text-decoration: none; }

/* ---------- language-specific entries ----------
   Some channels only exist for one language (Kook is a Chinese chat app,
   Discord is kept for the English pages), so those links are marked in the
   markup and hidden everywhere else. */
html:not([lang^="zh"]) .zh-only { display: none; }
html[lang^="zh"] .en-only { display: none; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  white-space: nowrap;
}

.lang-switch a,
.lang-switch .lang-current {
  padding: 2px 8px;
  border-radius: 5px;
  line-height: 1.5;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.lang-switch a { color: var(--header-muted); }
.lang-switch a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
}

.lang-switch .lang-current {
  background: rgba(255, 255, 255, .16);
  color: var(--header-ink);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: var(--header-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 7px;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }

/* ============================================================
   Layout
   ============================================================ */
.layout {
  display: flex;
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
  /* The sidebar is fixed (see below), so its column is reserved here instead:
     22px page padding + 240px column + 40px gap. */
  padding: 30px 22px 72px 302px;
}

/* Fixed rather than sticky: a sticky sidebar is clamped by the bottom of
   .layout, so once the footer comes into view at the end of a long page it
   would be pushed up and its first items (Home) could no longer be reached —
   scrolling the sidebar itself cannot bring them back, the box is clipped.
   Fixed keeps it pinned to the viewport for the whole scroll range. */
.sidebar {
  position: fixed;
  top: 86px;
  /* Centre it on the same column as .layout: 1240 / 2 - 22, and fall back to
     the page padding once the viewport is narrower than the layout. */
  left: max(22px, calc(50% - 598px));
  width: 240px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain; /* wheel/touch at the top/bottom edge stays here */
  /* The last 80px are a safety strip: the footer band (62px, see .footer)
     paints over the bottom of this fixed column at the end of a page, and this
     padding pushes the last links above it when the menu is scrolled down. */
  padding: 0 4px 80px 0;
  scrollbar-width: thin;
  /* below the footer band */
  z-index: 2;
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

.nav-group { margin: 0 0 4px; }

/* hairline between groups so a label never floats on top of the previous list */
.nav-group + .nav-group {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.nav-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 11px 8px;
}

.sidebar a {
  position: relative;
  display: block;
  padding: 6.5px 11px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  transition: background .12s, color .12s;
}

.sidebar a:hover { background: var(--hover-nav); color: var(--ink); text-decoration: none; }

.sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}
.sidebar a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

/* indented sub-list (feature pages) */
.nav-sub { margin: 1px 0 6px; }
.nav-sub a {
  padding-left: 26px;
  font-size: 13px;
  color: var(--muted);
}
.nav-sub a:hover { color: var(--ink); }
.nav-sub a.active { font-size: 13px; }
.nav-sub a.active::before { left: 13px; top: 8px; bottom: 8px; }

/* breadcrumb + prev/next pager on content pages */
.crumbs {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); text-decoration: none; }

.pager {
  display: flex;
  gap: 14px;
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pager a {
  flex: 1 1 0;
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.pager a:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}
.pager .dir { display: block; font-size: 12px; color: var(--muted); }
.pager .name { display: block; font-weight: 650; color: var(--ink); margin-top: 2px; }
.pager .pager-next { text-align: right; }
.pager .spacer { flex: 1 1 0; }

.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 18, .5);
  z-index: 60;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.backdrop.show { display: block; }

.content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 900px;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.32;
}

h1 {
  font-size: 31px;
  margin: 4px 0 10px;
}

h2 {
  font-size: 22.5px;
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}

h2:first-of-type { margin-top: 30px; padding-top: 0; border-top: 0; }

h3 {
  font-size: 17px;
  margin: 30px 0 8px;
  scroll-margin-top: 80px;
}

p { margin: 11px 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

ul, ol { padding-left: 24px; margin: 11px 0; }
li { margin: 5px 0; }
li::marker { color: var(--muted); }

strong { font-weight: 680; }

.lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.75;
}

.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.65; }

hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* ============================================================
   Code
   ============================================================ */
code {
  font-family: var(--mono);
  font-size: 12.8px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Long identifiers (Maven coordinates, class names) must wrap inside running
   text, otherwise a single token widens the whole page on narrow screens. */
.content p code,
.content li code,
.content td code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre {
  position: relative;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 16px 0;
  line-height: 1.62;
  tab-size: 4;
  scrollbar-width: thin;
}

pre::-webkit-scrollbar { height: 9px; }
pre::-webkit-scrollbar-thumb { background: #33404f; border-radius: 8px; }

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 12.8px;
  white-space: pre;
}

.copy-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: inherit;
  color: #9fb0c4;
  background: #1b2330;
  border: 1px solid #2d3a4c;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: #fff; border-color: #475970; }

@media (hover: none) {
  .copy-btn { opacity: .9; }
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.62;
}

th {
  text-align: left;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

td {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--hover-row); }

td:first-child { font-weight: 560; }

/* Short first-column labels (launcher names, option names): keep them on one
   line and let the description column take the remaining width. */
.tbl-names td:first-child,
.tbl-names th:first-child { white-space: nowrap; width: 1%; }

/* ============================================================
   kbd
   ============================================================ */
.kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}

/* ============================================================
   Callouts
   ============================================================ */
.callout {
  border: 1px solid var(--note-line);
  border-left: 4px solid var(--note);
  background: var(--note-bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 14.5px;
}
.callout.tip { border-color: var(--tip-line); border-left-color: var(--tip); background: var(--tip-bg); }
.callout.warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-bg); }
.callout.danger { border-color: var(--danger); background: var(--danger-bg); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-block;
  padding: 2.5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: var(--chip-bg);
  color: var(--muted);
  margin-right: 6px;
  white-space: nowrap;
}
.badge.green { background: var(--accent-soft); color: var(--accent-ink); }
.badge.blue { background: var(--note-bg); color: var(--note); }

/* ============================================================
   Hero (index page)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  color: #eef3f9;
  border-radius: 18px;
  padding: 46px 42px 42px;
  margin-bottom: 32px;
  background:
    radial-gradient(900px 340px at 88% -10%, rgba(43, 182, 115, .34), transparent 62%),
    radial-gradient(700px 300px at -8% 108%, rgba(46, 111, 194, .26), transparent 60%),
    linear-gradient(150deg, #131924 0%, #16202c 55%, #12291f 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--shadow-lift);
  animation: rise .5s ease both;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 75%);
}

.hero > * { position: relative; z-index: 1; }

.hero h1 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 40px;
  letter-spacing: -.02em;
}

.hero .tagline {
  color: #adbccd;
  font-size: 16.5px;
  margin: 0 0 20px;
  max-width: 620px;
}

.hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-bottom: 24px;
}

.hero .badges .badge { margin-right: 0; }

.hero .badge {
  background: rgba(255, 255, 255, .1);
  color: #d5dfeb;
  border: 1px solid rgba(255, 255, 255, .08);
}
.hero .badge.green {
  background: rgba(52, 199, 123, .18);
  color: #8ce7b4;
  border-color: rgba(52, 199, 123, .3);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Wide screens repeat nothing: the top bar already links to every destination
   in this row, so it is dropped there. Below 941px the top bar collapses into
   the menu button, and these buttons become the only way in — keep them. */
@media (min-width: 941px) {
  .hero .btn-row { display: none; }
  .hero .badges { margin-bottom: 0; }
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #22a869, #12864e);
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(23, 145, 90, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { background: linear-gradient(180deg, #27b873, #159254); box-shadow: 0 4px 16px rgba(23, 145, 90, .45); }

.btn-ghost {
  border-color: rgba(255, 255, 255, .2);
  color: #e3ebf4 !important;
  background: rgba(255, 255, 255, .04);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* ============================================================
   Cards
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

/* four entry cards would otherwise wrap 3 + 1 at desktop width */
.cards.cards-2 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.card {
  position: relative;
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
  text-decoration: none;
}

.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.card .card-arrow {
  margin-top: 12px;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 13px;
}

.card.plain { transition: none; box-shadow: var(--shadow-card); }
.card.plain:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--line); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  /* paints above the fixed sidebar, so the menu slides under it at page end
     instead of spilling over the footer band */
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  /* kept short on purpose: the shorter the band, the less of the fixed column
     it covers (the sidebar reserves an 80px strip for it, see .sidebar) */
  padding: 18px 22px 20px;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  line-height: 1.8;
}

.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent-ink); text-decoration: none; }

/* ============================================================
   Motion
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { animation: none; }
  .card, .btn { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .topnav { display: none; }
  /* the top nav carried the `margin-left: auto` that pushed the right-hand group
     across, so once it is gone the switcher has to take that job over and stay
     flush with the right edge like it is on wide screens */
  .lang-switch { margin-left: auto; flex: none; }
  /* on very narrow phones the brand is the only thing that can give way, so it
     truncates instead of shoving the switcher past the padding */
  .brand { min-width: 0; }
  .brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .layout { padding: 20px 16px 60px; gap: 0; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: 272px;
    /* the desktop column's flex sizing leaks into the fixed drawer and makes
       it grow to its content height (unscrollable), so reset it */
    flex: none;
    align-self: auto;
    max-height: none;
    background: var(--panel);
    padding: 74px 14px 24px;
    transform: translateX(-103%);
    transition: transform .2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* dragging past the ends must not scroll the page */
    box-shadow: 0 0 40px rgba(8, 12, 18, .35);
  }
  .sidebar.open { transform: translateX(0); }

  /* freeze the page behind the drawer while it is open */
  body.nav-open { overflow: hidden; }

  .hero { padding: 30px 24px; border-radius: 14px; }
  .hero h1 { font-size: 28px; }
  .hero .tagline { font-size: 15px; }
  h1 { font-size: 25px; }
  h2 { font-size: 20.5px; }
}

@media (max-width: 480px) {
  .hero { padding: 26px 20px; }
  .btn { padding: 9px 16px; font-size: 13.5px; }
  /* phones: tighten the bar so the brand keeps its full name next to the switcher */
  .topbar { padding: 0 16px; gap: 10px; }
  .brand-text { font-size: 14.5px; }
  .lang-switch { font-size: 12.5px; }
  .lang-switch a, .lang-switch .lang-current { padding: 2px 7px; }
}

/* ============================================================
   Print
   ============================================================ */
/* The sidebar is fixed on desktop, so it would be stamped over the first
   printed page; drop the chrome and let the article use the full width. */
@media print {
  .topbar,
  .sidebar,
  .backdrop { display: none; }
  .layout { display: block; max-width: none; padding: 0; }
  .content { max-width: none; }
  .footer { position: static; }
}