:root {
  --bg: #000;
  --bg-2: #0a0a0c;
  --ink: #fff;
  --muted: #a9a9b3;
  --line: rgb(255 255 255 / 0.16);
  --page: 73.75rem; /* 1180px at the browser's own type size, wider with a larger one, so the bar keeps its room */
  --gutter: clamp(22px, 5vw, 64px);
  --edge: max(var(--gutter), calc((100% - var(--page)) / 2)); /* the side padding that centres the page column (header, home panels) */
  --title-panel: clamp(1.805rem, 3.99vw, 3.23rem);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; background: var(--bg); }
html:has(body.home) { scroll-snap-type: y proximity; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 40; padding: 10px 16px; background: #fff; color: #000; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- type ------------------------------------------------------------------------------------ */
/* Three title sizes, each 5% under what they were: the page title (h1), the title of a home panel (the hero's h1 is the same
   size as the panels'), and the section title (h2). */
h1, h2 { text-transform: uppercase; font-weight: 600; letter-spacing: 0.035em; text-wrap: balance; }
h1 { font-size: clamp(1.805rem, 4.37vw, 3.8rem); line-height: 1.1; }
h2 { font-size: clamp(1.615rem, 3.42vw, 2.945rem); line-height: 1.12; }
h3, .t3 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 46ch; text-wrap: pretty; }

.words { display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.words li { display: inline-block; }
.words li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 10px; border-radius: 50%; background: #fff; vertical-align: middle; position: relative; top: -1px; }

/* ---- buttons --------------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 34px;
  border: 1px solid rgb(255 255 255 / 0.75); background: transparent; color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
}
.button:hover { background: #fff; color: #000; border-color: #fff; }
.button-solid { background: #fff; color: #000; border-color: #fff; }
.button-solid:hover { background: #d4d4d8; color: #000; border-color: #d4d4d8; }
.arrow { transition: transform .25s; }
.button:hover .arrow, .next:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-top: 8px; }

/* ---- header ---------------------------------------------------------------------------------- */
.top {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px;
  padding: 6px var(--edge);
  transition: background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.top.solid, body.inner .top {
  background: rgb(0 0 0 / 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--line);
}
/* the brand: the mark and the name side by side, in the proportions of the product's sidebar (the word half as high as the
   mark, weight 600, tracking 0.2em): the mark is 26 px high here, so the name is 13 px. The 404 page shows it large. */
.brand { display: inline-flex; align-items: center; gap: 9px; line-height: 0; justify-self: start; color: #fff; text-decoration: none; }
/* the mark keeps its size, so the bar is laid out for what the brand really needs and the name can never run under the menu */
.brand img { flex: none; max-width: none; }
.brand-name { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.25; text-transform: uppercase; white-space: nowrap; }
.brand-large { gap: 22px; }
.brand-large .brand-name { font-size: clamp(1.25rem, 7vw, 1.9rem); line-height: 1.15; white-space: normal; max-width: min-content; }
/* the menu sits in the middle of the bar, the brand at one end and the language at the other */
.nav { justify-self: center; }
.nav ul { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.nav-link, .top-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgb(255 255 255 / 0.82); transition: color .2s; }
.nav-link:hover, .top-link:hover, .nav-link[aria-current] { color: #fff; }
.nav-link[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.top-end { display: flex; align-items: center; gap: 16px; justify-self: end; }

.lang, .burger { position: relative; }
.lang summary, .burger summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 40px; min-width: 40px; justify-content: center; padding: 6px 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lang summary::-webkit-details-marker, .burger summary::-webkit-details-marker { display: none; }
.burger { display: none; }
.lang-code { display: none; }
.menu-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 232px; padding: 8px;
  background: rgb(10 10 12 / 0.96); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.lang-link, .burger-link { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; text-decoration: none; font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; }
.lang-link:hover, .burger-link:hover, .lang-link:focus-visible, .burger-link:focus-visible { background: rgb(255 255 255 / 0.08); }
.lang-link[aria-current], .burger-link[aria-current] { color: #fff; font-weight: 700; }

/* ---- home: full-screen panels, laid out as a Z (logo top left, menu in the middle, language top right, text bottom left, then bottom right, ...) ---- */
.panel {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: start;
  padding: 120px var(--edge) clamp(72px, 12vh, 130px); overflow: hidden; background: var(--bg);
}
.panel-right { align-items: flex-end; }
/* panels off screen are not drawn; until they are, they take the size they will have (the screen, less the padding and the border,
   which the intrinsic size does not include), so the page does not change height as you scroll */
.panel + .panel { border-top: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto calc(100vh - 121px - clamp(72px, 12vh, 130px)); contain-intrinsic-size: auto calc(100svh - 121px - clamp(72px, 12vh, 130px)); }
/* on a short screen (a phone on its side) a panel is taller than the screen and the estimate would be too small: draw them all */
@media (max-height: 600px) {
  .panel + .panel { content-visibility: visible; }
}
.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.panel .bg { inset: -3% 0; height: 106%; } /* room for the slow drift, so the picture never shows an edge */
.panel canvas.bg { inset: 0; height: 100%; display: block; }
.panel::before, .page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.58) 38%, rgb(0 0 0 / 0.12) 78%, rgb(0 0 0 / 0.3) 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, transparent 46%);
}
.panel-right::before {
  background:
    linear-gradient(270deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.58) 38%, rgb(0 0 0 / 0.12) 78%, rgb(0 0 0 / 0.3) 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, transparent 46%);
}
.panel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 580px; text-align: start; }
.panel-copy h2 { font-size: var(--title-panel); max-width: 16ch; text-shadow: 0 2px 28px rgb(0 0 0 / 0.85); }
.panel-text { color: rgb(255 255 255 / 0.88); max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.15rem); text-shadow: 0 1px 18px rgb(0 0 0 / 0.9); }
.panel-copy .button { margin-top: 14px; }
/* panels without a background: black with a soft grey glow behind the text */
.panel-plain { background: radial-gradient(60% 55% at 14% 120%, rgb(255 255 255 / 0.1), transparent 72%), var(--bg); }
.panel-plain.panel-right { background: radial-gradient(60% 55% at 86% 120%, rgb(255 255 255 / 0.1), transparent 72%), var(--bg); }
.panel-plain::before, .page-head-plain::before { content: none; }
.page-head-plain { background: radial-gradient(60% 80% at 12% 130%, rgb(255 255 255 / 0.07), transparent 72%), var(--bg); }

.panel-hero { padding-bottom: clamp(88px, 15vh, 150px); }
/* the ring of the hero sits on the right, so the title takes the left: dark on the left, clear on the right */
.panel-hero .bg, .panel-left .bg { object-position: 72% 50%; }
.panel-right .bg { object-position: 28% 50%; }
/* the light panels (text on the right, ring on the left): white panel, black text */
.panel-light { background: #fff; color: #0a0a0c; }
.panel-light::before {
  background:
    linear-gradient(270deg, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.62) 40%, rgb(255 255 255 / 0.06) 78%, transparent 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.7) 0%, transparent 42%);
}
.panel-light .panel-copy h2 { text-shadow: 0 0 30px rgb(255 255 255 / 0.9); }
.panel-light .panel-text { color: rgb(10 10 12 / 0.82); text-shadow: 0 0 22px rgb(255 255 255 / 0.9); }
.panel-light .button { border-color: #0a0a0c; color: #0a0a0c; }
.panel-light .button:hover { background: #0a0a0c; color: #fff; border-color: #0a0a0c; }
.panel-light:focus-visible, .panel-light a:focus-visible { outline-color: #0a0a0c; }
.panel-light + .panel, .panel + .panel-light { border-top-color: rgb(255 255 255 / 0.16); }

.panel-hero::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.6) 34%, rgb(0 0 0 / 0.08) 62%, transparent 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.75) 0%, transparent 40%);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: min(880px, 58vw); text-align: start; }
.hero-copy h1 { font-size: var(--title-panel); text-shadow: 0 2px 30px rgb(0 0 0 / 0.8); }
.signature { display: flex; align-items: center; gap: 14px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 18px rgb(0 0 0 / 0.9); }
.signature::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.hero-copy .lead { max-width: 50ch; color: rgb(255 255 255 / 0.88); text-shadow: 0 1px 18px rgb(0 0 0 / 0.9); }
.down { position: absolute; bottom: clamp(30px, 6vh, 56px); inset-inline-end: var(--edge); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 50%; color: #fff; transition: border-color .2s, transform .2s; }
.down:hover { border-color: #fff; transform: translateY(3px); }

/* the last panel is the brand's: the mark large on black, with the principle beside it */
.panel-mark { background: radial-gradient(46% 60% at 74% 50%, rgb(255 255 255 / 0.1), transparent 72%), var(--bg); }
.panel-mark::before { content: none; }
/* the title takes the width of the column instead of 16 characters, so each sentence breaks later and no short word is left alone on a line */
.panel-mark h2 { max-width: none; }
.panel-mark .mark { position: absolute; z-index: -1; top: 50%; inset-inline-end: var(--edge); height: min(40vh, 340px, calc((100vw - 2 * var(--gutter) - 620px) / 1.257)); width: auto; transform: translateY(-50%); stroke: none; }
.panel-mark h2 .line { display: block; }

/* A smooth hand-over from one panel to the next: the browser snaps to the panels (desktop), the text rises in and the
   background drifts slowly as the panel scrolls into view. Browsers without scroll-driven animations just show the panels. */
@media (min-width: 961px) and (pointer: fine) {
  html:has(body.home) { scroll-snap-type: y mandatory; }
}
body.home .foot { scroll-snap-align: end; }
@keyframes rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(-2%); } to { transform: translateY(2%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel-copy, .hero-copy { animation: rise ease-out both; animation-timeline: view(); animation-range: entry 5% entry 85%; }
    .panel img.bg { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}

/* ---- inner pages ----------------------------------------------------------------------------- */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(78vh, 760px); min-height: min(78svh, 760px); display: flex; align-items: flex-end;
  padding: 150px var(--gutter) clamp(48px, 9vh, 96px); background: var(--bg);
}
.page-head-copy { width: 100%; max-width: var(--page); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.page-head h1 { max-width: 16ch; }
.page-head .lead { color: rgb(255 255 255 / 0.86); }
.page-head .bg { object-position: center; }
/* the banner of an inner page is an animation on a canvas (scene.js) that fills the page head */
.page-head-scene { min-height: min(92vh, 900px); min-height: min(92svh, 900px); }
.page-head-scene .bg-scene { inset: 0; width: 100%; height: 100%; display: block; }
/* the drawing sits above the title, which fades into black */
.page-head-scene::before { background: linear-gradient(0deg, rgb(0 0 0 / 0.98) 0%, rgb(0 0 0 / 0.9) 30%, rgb(0 0 0 / 0) 58%); }
/* a drawing that reaches down the right side (Topology, AI): the title is darkened from the left instead */
.page-head-scene-side::before {
  background:
    linear-gradient(0deg, #000 0, rgb(0 0 0 / 0) 84px),
    radial-gradient(ellipse 62% 70% at 6% 100%, rgb(0 0 0 / 0.94) 0%, rgb(0 0 0 / 0.78) 48%, rgb(0 0 0 / 0) 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.7) 0%, transparent 28%);
}
.block { padding: clamp(44px, 9vh, 96px) var(--gutter); max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; }
.block h2 { max-width: 20ch; }
.block > .lead { margin-top: 20px; }
.block > .words { margin-top: 30px; }
.rows { border-top: 1px solid var(--line); }
.block h2 + .lead + .words + .rows, .block h2 + .rows { margin-top: 48px; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 40px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.rows p, .steps p, .trust p { color: var(--muted); max-width: 48ch; }
.note { margin-top: 36px; font-weight: 500; max-width: 54ch; }

.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.steps li { border-top: 1px solid rgb(255 255 255 / 0.6); padding-top: 22px; }
.number { display: block; margin-bottom: 18px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: 10px; }

.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.trust li { border-top: 1px solid var(--line); padding-top: 24px; }
.trust h3 { margin-bottom: 10px; }

/* the contact page: a short, plain head, then the address large (a mailto link; an address that is long for a narrow screen breaks
   instead of leaving it) */
.page-head-short { min-height: min(52vh, 520px); min-height: min(52svh, 520px); }
.contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: clamp(32px, 6vh, 64px); }
.contact-mail { display: inline-flex; align-items: center; gap: 0.45em; max-width: 100%; padding-bottom: 0.12em; border-bottom: 2px solid currentColor; font-size: clamp(1.5rem, 4.2vw, 2.75rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.contact-mail .arrow { flex: none; width: 0.7em; height: 0.7em; transition: transform .25s; }
.contact-mail:hover .arrow { transform: translateX(6px); }

.screen { margin-top: 28px; }
.screen img { width: 100%; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 0 100px -30px rgb(255 255 255 / 0.12); background: #0d1117; }
.screen figcaption { margin-top: 12px; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.screen-main { margin-top: 0; }
.views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.views .screen { margin-top: 0; }
.views .screen img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.caption { margin-top: 28px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.closing { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 24px; padding: clamp(80px, 16vh, 170px) max(var(--gutter), calc((100% - var(--page)) / 2)) clamp(60px, 10vh, 110px);
  border-top: 1px solid var(--line); background: radial-gradient(60% 70% at 12% 130%, rgb(255 255 255 / 0.1), transparent 72%), var(--bg); }
.closing h2 { max-width: 16ch; }
.next { align-self: flex-end; display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.next:hover { color: #fff; }

/* ---- footer ---------------------------------------------------------------------------------- */
.foot { padding: 48px var(--gutter) 44px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.foot-grid { max-width: var(--page); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 24px 56px; align-items: start; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-signature { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; }
/* the contact address under the brand, on every page: the colour of the ink, not of the muted links, and in lower case */
.foot-mail { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); font-size: 0.86rem; letter-spacing: 0.04em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.foot-mail:hover { text-decoration-thickness: 2px; }
.foot-pages, .foot-lang { display: flex; flex-direction: column; gap: 10px; }
.foot-link { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; letter-spacing: 0.16em; text-transform: uppercase; }
.foot-link:hover { color: #fff; }
.foot-link[aria-current] { color: #fff; }
.foot-rights { max-width: var(--page); margin: 40px auto 0; letter-spacing: 0.06em; }

/* ---- 404 ------------------------------------------------------------------------------------- */
.lost { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; padding: 120px var(--gutter) clamp(72px, 12vh, 130px); text-align: start; }

/* The menu folds into the burger when the bar has no room for it beside the brand and the language. The longest menu, in Portuguese
   and Spanish, needs about 1050px with the system type and more with a wider face, so it folds at 1140px. The queries that decide
   this are in em, the size of the type the visitor has chosen, so a larger text size folds the menu earlier instead of letting
   the words meet. */
@media (max-width: 71.25em) {
  .top { grid-template-columns: auto 1fr; }
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head-scene-side::before { background: linear-gradient(0deg, rgb(0 0 0 / 0.95) 0%, rgb(0 0 0 / 0.7) 42%, rgb(0 0 0 / 0) 74%); }
  /* narrow screens: the title takes the full width over the lower half, the animation stays above it */
  .hero-copy { max-width: none; }
  /* the mark takes its place in the column, above the text, instead of beside it */
  .panel-mark .mark { position: static; z-index: auto; transform: none; align-self: flex-start; height: clamp(110px, 18vh, 170px); height: clamp(110px, 18svh, 170px); margin-bottom: 34px; }
  .panel-hero::before { background: linear-gradient(0deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.66) 48%, rgb(0 0 0 / 0.08) 82%); }
}

@media (max-width: 720px) {
  .rows li { grid-template-columns: 1fr; padding: 24px 0; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .trust { grid-template-columns: 1fr; gap: 32px; }
  .views { grid-template-columns: 1fr; }
  .top-end { gap: 14px; }
}

/* the footer's columns stack at 45em (720px at the usual 16px type), in em like the header's queries: with a larger type size the
   three columns no longer fit beside each other, and a fixed 720px left the language list cut at the edge */
@media (max-width: 45em) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* the three queries below are in em for the reason given at the menu's: they follow the type size the visitor has chosen */
@media (max-width: 37.5em) {
  /* phones: the language shows as its code (EN, PT, ES), so the brand (wider now, with its word) and the menu share one line
     with it; "Português (Brasil)" does not fit beside them */
  .lang-name { display: none; }
  .lang-code { display: inline; }
}

@media (max-width: 26.25em) {
  /* the name is 16 letters wide: a little smaller so it, the language and the menu share the line on a phone */
  .brand { gap: 8px; }
  .brand-name { font-size: 0.72rem; letter-spacing: 0.16em; }
}
@media (max-width: calc(10em + 198px)) {
  /* a phone too narrow for the name beside the language and the menu: the mark alone, and the link keeps its name for assistive
     technology. The name needs 356px at the usual 16px type and about 10px more for every px of type (394 at 20px, 432 at 24px,
     475 at 28px), the rest of the bar being fixed in px; this is that line, 2px or more over. Only the bar: the footer and the
     404 page have room for it. */
  .top .brand-name { display: none; }
}

/* the exclamation mark of the brand panel lands last, the bar and then the dot, when the panel comes into view: site.js arms the
   panel (.armed) and lets it in (.in); without the script, or with "reduce motion", the mark is simply there */
@media (prefers-reduced-motion: no-preference) {
  .panel-mark.armed .mark-bar, .panel-mark.armed .mark-dot { opacity: 0; transform-box: fill-box; }
  .panel-mark.armed .mark-bar { transform: translateY(-9%); }
  .panel-mark.armed .mark-dot { transform: translateY(-45%); }
  .panel-mark.armed.in .mark-bar, .panel-mark.armed.in .mark-dot { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .8s cubic-bezier(.2, .8, .2, 1); }
  .panel-mark.armed.in .mark-bar { transition-delay: .2s; }
  .panel-mark.armed.in .mark-dot { transition-delay: .55s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:has(body.home) { scroll-snap-type: none !important; }
  .button, .arrow, .down { transition: none; }
}