/* Shared shell. Phone first (390px), one column; page CSS goes in its own file. */
:root {
  color-scheme: light only;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --soft: #f5f5f7;
  --paper: #fff;
  --night: #1d1d1f;
  --cold: #0a84ff;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

/* The footer sits at the bottom of the screen on a short page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; }
h1 { font-size: clamp(25px, 7.9vw, 32px); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }

a { color: inherit; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The browser's own surfaces carry the palette too: a light wash of the one blue, readable on white and on night. */
::selection { background: rgba(10, 132, 255, 0.24); }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 40px 0; }
.band-soft { background: var(--soft); }
.lead { margin-top: 12px; color: var(--muted); font-size: 19px; }
.muted { color: var(--muted); }
.nb { white-space: nowrap; }

/* The site's one dark band. It redefines the page's colours, so everything inside follows, links and focus rings too.
   The header joins it, so the band starts at the top of the screen. At most one per page. */
.band-dark,
body:has(.band-dark) .site-header {
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --line: #424245;
  --paper: transparent;
  --error: #ff6961;
  background: var(--night);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:has(.band-dark) .site-header { border-bottom-color: transparent; }

/* The way back: quiet, above the title. 44px to tap, about 24px of the first screen: the margins hand the rest back. */
.back { position: relative; display: flex; align-items: center; width: fit-content; min-height: 44px; margin: -12px 0 -8px; color: var(--muted); font-size: 15px; text-decoration: none; white-space: nowrap; }

/* The page's name and its category's drawing, one line. */
.title-top { display: flex; align-items: center; justify-content: space-between; column-gap: 12px; }
.title-glyph { flex: none; width: clamp(48px, 15vw, 64px); height: clamp(48px, 15vw, 64px); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.title-glyph * { vector-effect: non-scaling-stroke; }
.title-glyph .g-air { stroke: var(--cold); }

/* A page with one thing to say: white, big type. */
.big-type { padding: 32px 0 48px; }
.big-type h1 { font-size: clamp(34px, 10.2vw, 40px); }
.big-type .lead { margin-top: 14px; }
.go-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.notfound-next { margin-top: 28px; }
/* The live categories under the button, as plain links in hairline rows, each a 44px target (card #162). */
.notfound-list { max-width: 560px; margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.notfound-list li { border-top: 1px solid var(--line); }
.notfound-list a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; }
.notfound-arrow { margin-left: 6px; color: var(--muted); }
@media (hover: hover) { .notfound-list a:hover { text-decoration: underline; } }

main { flex: 1 0 auto; }

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap,
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
}
.site-header a,
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
/* The header links touch the top of the screen, so an outside ring loses its top edge. The ring goes inside the link;
   4px of padding the margin gives back keeps it off the letters without moving them. */
.site-header a,
.site-footer nav a { padding-inline: 4px; margin-inline: -4px; }
.site-header a:focus-visible,
.site-footer nav a:focus-visible { outline-offset: -2px; }
.site-header .site-name { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.site-header nav,
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.site-header nav a { font-size: 15px; color: var(--muted); }
.site-header nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) {
  .site-header nav a:hover,
  .site-footer a:hover { color: var(--ink); }
}

.site-footer {
  padding: 20px 0 28px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
}
/* When the menu wraps under the email, 24px between them less the menu's 12px pull-up lets the two 44px tap areas
   meet without overlapping. Side by side, the pull-up keeps the menu level with the first company line. */
.site-footer .wrap { align-items: flex-start; row-gap: 24px; }
.site-footer nav { margin-top: -12px; }
/* 44px tap area from the link's own box; the margin gives the padding back so the lines stay even. */
.site-company a { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* On a phone the menu goes under the email, whatever the company lines' width: they are short enough now to leave it room. */
.site-company { flex-basis: 100%; }
@media (min-width: 640px) { .site-company { flex-basis: auto; } }

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.032em; }
  h2 { font-size: 32px; }
  .band { padding: 64px 0; }
  .title-glyph { width: 96px; height: 96px; stroke-width: 2.6; }
  .big-type { padding: 72px 0 96px; }
  .big-type h1 { font-size: 72px; }
  .go-button { min-height: 48px; font-size: 17px; }
}

/* ET | RU (card #158), in the footer: the language in use in ink, the other muted, as the footer menu. */
.site-footer .langs { display: flex; align-items: center; column-gap: 4px; margin-top: -12px; }
.site-footer .langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  color: var(--muted);
}
.site-footer .langs a[aria-current="true"] { color: var(--ink); }
.site-footer .langs a:focus-visible { outline-offset: -2px; }
/* Side by side, the menu and the languages sit together on the right. */
@media (min-width: 768px) {
  .site-footer .wrap > nav:not(.langs) { margin-left: auto; }
}