:root {
  --q-blue:      #00b4ff;
  --bg-0:        #000000;
  --bg-1:        #0a0a0a;
  --fg-1:        #ffffff;
  --fg-2:        #cccccc;
  --fg-3:        #999999;
  --border-2:    rgba(255,255,255,0.14);
  --radius-pill: 999px;
  --font-display:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:   "Inter", "Trebuchet MS", "Calibri", "Helvetica Neue", Arial, sans-serif;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --stage:       min(2100px, 92vw);
  --gutter:      clamp(24px, 5vw, 80px);
}

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

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.stage {
  width: 100%;
  max-width: var(--stage);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* the reading column: narrow for legibility, but starting at the same left
   edge as the wordmark above it rather than centring on the page */
.measure { max-width: 760px; }

a { color: var(--q-blue); text-decoration: none; border-bottom: 1px solid rgba(0,180,255,0.35); }
a:hover { border-bottom-color: var(--q-blue); }

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

/* header */
.masthead { border-bottom: 1px solid var(--border-2); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: clamp(18px, 3vw, 28px);
}
.wordmark { border: 0; display: inline-flex; }
.wordmark img { width: clamp(104px, 11vw, 132px); height: auto; display: block; }
.langswitch {
  font-size: 13px; color: var(--fg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-pill); padding: 8px 16px; min-height: 40px;
  display: inline-flex; align-items: center;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.langswitch:hover { border-color: var(--q-blue); color: var(--fg-1); }

/* document */
.doc { padding-block: clamp(40px, 7vw, 72px) clamp(56px, 9vw, 96px); }

h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.doc__meta { margin: 0 0 clamp(32px, 5vw, 48px); font-size: 14px; color: var(--fg-3); }

h2 {
  margin: clamp(40px, 6vw, 56px) 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  scroll-margin-top: 24px;
}

p { margin: 0 0 16px; }
strong { color: var(--fg-1); font-weight: 600; }
em { font-style: italic; }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

.callout {
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-left: 2px solid var(--q-blue);
  border-radius: 4px;
}
.callout p:last-child { margin-bottom: 0; }

.tablewrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
th { color: var(--fg-1); font-weight: 600; white-space: nowrap; }

.contact { margin: 0 0 16px; line-height: 1.8; }
.contact span { display: block; }

/* toc */
.toc { margin: 0 0 clamp(32px, 5vw, 44px); padding: 20px 24px; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: 6px; }
.toc h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-body); font-weight: 500; }
.toc ol { margin: 0; padding-left: 20px; font-size: 14px; }
.toc li { margin-bottom: 6px; }
.toc a { border-bottom: 0; color: var(--fg-2); }
.toc a:hover { color: var(--q-blue); }

/* footer */
.colophon { border-top: 1px solid var(--border-2); }
.colophon__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding-block: clamp(20px, 3vw, 28px); font-size: 12px; color: var(--fg-3);
}
.colophon a { color: var(--fg-3); border-bottom: 1px solid var(--border-2); }
.colophon a:hover { color: var(--fg-1); border-bottom-color: var(--q-blue); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}