/* ==========================================================================
   BAZA PRODUCTION - Base: reset, typography, layout primitives and
   shared components (header, menu, buttons, footer, cursor).
   Shared by every page. Page-specific styles live in /css/pages/.
   ========================================================================== */

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

html {
  overflow-x: hidden;                  /* iPhone: the page can never be panned sideways (goes to the viewport, sticky still works) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-bg);
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
/* Lenis owns smooth scrolling. Native smooth behaviour must be off, or
   ScrollTrigger measures pins at the wrong scroll offset on every refresh
   (resize, zoom, late fonts) and pinned sections start in the wrong place. */
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.lenis-stopped { overflow: clip; }

body {
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; line-height: inherit; }
::selection { background: var(--c-accent); color: var(--c-accent-ink); }

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

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 18px;
  background: var(--c-accent); color: var(--c-accent-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
}
.section { position: relative; padding-block: var(--section-y); }
.rule { height: 1px; background: var(--c-line); border: 0; transform-origin: left center; }

/* ---------- Typography ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.t-statement {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.t-lead {
  font-size: var(--fs-md);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--c-fg-2);
  text-wrap: pretty;
}
.t-mono,
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 450;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1.4;
}
.label { display: inline-flex; align-items: center; gap: 0.9em; color: var(--c-fg-3); }
.label::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--c-accent);
  transform: rotate(45deg);          /* one cell of the BAZA lattice */
  flex: none;
}
.label--plain::before { display: none; }
.muted { color: var(--c-fg-2); }
.accent { color: var(--c-accent); }

/* ---------- Links ---------- */
.link {
  position: relative;
  display: inline-block;
  padding-block: 2px;
}
.link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .link:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-fg);
  --btn-bd: var(--c-line-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 550;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.btn::before {                        /* fill wipes up from below on hover */
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  background: var(--c-fg);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out);
}
.btn__arrow { width: 14px; height: 14px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.btn--primary { --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink); --btn-bd: var(--c-accent); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
@media (hover: hover) {
  .btn:hover { color: var(--c-bg); border-color: var(--c-fg); }
  .btn:hover::before { transform: none; }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  transition: transform 0.65s var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.site-header::before {                 /* glass bar, visible once scrolled */
  content: "";
  position: absolute; inset: 0;
  background: rgb(10 10 11 / 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
}

.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand__mark { width: 20px; height: auto; flex: none; fill: var(--c-accent); }
/* Header logo takes the colour of the current direction (body[data-dir] sets
   --dir on inner pages); on home and 404 there is no --dir, so it stays BAZA
   yellow. One SVG, recoloured through fill - no per-page logo files. */
.site-header .brand__mark, .menu__home svg { fill: var(--dir, var(--c-accent)); transition: fill 0.6s var(--ease-out); }
.brand__word {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.site-nav { display: none; }
.site-nav__list { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.site-nav a {
  font-size: var(--fs-sm);
  color: var(--c-fg-2);
  transition: color var(--dur-1) ease;
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--c-fg); }
.site-header__cta { display: none; }

.menu-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px;
  padding: 0 4px 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.menu-toggle__icon { position: relative; width: 22px; height: 22px; }
.menu-toggle__icon span {
  position: absolute; left: 3px; right: 3px; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out);
}
.menu-toggle__icon span:first-child { top: 8px; }
.menu-toggle__icon span:last-child { top: 13px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 10.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 10.5px; transform: rotate(-45deg); }

/* ---------- Language switch ---------- */
.lang-switch {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
}
.lang-switch a {
  padding: 8px 6px;
  color: var(--c-fg-3);
  transition: color var(--dur-1) ease;
}
.lang-switch a:hover { color: var(--c-fg); }
.lang-switch a[aria-current="true"] { color: var(--c-fg); }
.lang-switch a span { display: none; }                  /* full names live in the header menu */
.lang-switch--menu { display: inline-flex; flex-wrap: wrap; margin: 0; gap: 2px 4px; }
.lang-switch--menu a { padding: 8px 5px; }

/* Header language menu: the current code, the other languages on demand. */
.lang-menu {
  position: relative;
  display: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
}
.lang-menu__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 6px;
  color: var(--c-fg);
}
.lang-menu__btn i {
  width: 5px; height: 5px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-1) ease, margin var(--dur-1) ease;
}
.lang-menu__btn[aria-expanded="true"] i { transform: rotate(-135deg); margin-top: 3px; }
.lang-menu__list {
  position: absolute; right: -8px; top: calc(100% + 10px);
  min-width: 180px;
  padding: 6px;
  background: rgb(14 14 16 / 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-line);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s 0.25s;
}
.lang-menu.is-open .lang-menu__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-menu__list a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 10px;
  color: var(--c-fg-3);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.lang-menu__list a span { font-family: var(--font-body); letter-spacing: 0; color: var(--c-fg-3); }
.lang-menu__list a:hover, .lang-menu__list a:focus-visible { color: var(--c-fg); background: rgb(237 235 230 / 0.05); }
.lang-menu__list a:hover span { color: var(--c-fg-2); }
.lang-menu__list a[aria-current="true"] { color: var(--c-accent); }

@media (min-width: 900px) {
  .lang-menu { display: block; }
  .site-nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
  .site-header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--c-bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.8s var(--ease-in-out), visibility 0s linear 0.8s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.8s var(--ease-in-out), visibility 0s;
}
.menu__list { display: grid; gap: 4px; margin-top: auto; }
.menu__list a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: min(5rem, 13vw, calc((100vw - 2 * var(--pad) - 44px) / (var(--len, 8) * 0.66)));
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  text-transform: uppercase;
}
.menu__list a[aria-current="page"] { color: var(--dot, var(--c-accent)); }
.menu__list a span { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--tracking-mono); color: var(--c-fg-3); }
.menu__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px var(--gap);
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.menu__item { overflow: hidden; }
.menu__item > a { transform: translateY(105%); transition: transform 0.9s var(--ease-out); }
.menu.is-open .menu__item > a { transform: none; }
.menu.is-open .menu__item:nth-child(2) > a { transition-delay: 0.05s; }
.menu.is-open .menu__item:nth-child(3) > a { transition-delay: 0.1s; }
.menu.is-open .menu__item:nth-child(4) > a { transition-delay: 0.15s; }
.menu-open .site-header__inner .brand,
.menu-open .menu-toggle { position: relative; z-index: calc(var(--z-menu) + 1); }
.menu-open .site-header { z-index: calc(var(--z-menu) + 1); }
.menu-open .site-header::before { opacity: 0; }

/* ---------- Direction nav (inner pages) ---------- */
.dir-nav { display: none; }
.dir-nav ul { display: flex; gap: clamp(14px, 1.8vw, 32px); }
.dir-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-fg-3);
  transition: color var(--dur-1) ease;
}
.dir-nav a i {
  width: 6px; height: 6px;
  background: var(--dot);
  transform: rotate(45deg) scale(0.7);
  opacity: 0.55;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.dir-nav a:hover { color: var(--c-fg); }
.dir-nav a:hover i, .dir-nav a[aria-current="page"] i { transform: rotate(45deg) scale(1); opacity: 1; }
.dir-nav a[aria-current="page"] { color: var(--c-fg); }
@media (min-width: 1100px) {
  .dir-nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .site-header--inner .menu-toggle { display: inline-flex; }
}
.menu__home {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-fg-2);
}
.menu__home svg { width: 10px; }
.menu__list a i {
  width: 0.2em; height: 0.2em;
  align-self: center;
  background: var(--dot, var(--c-accent));
  transform: rotate(45deg);
  flex: none;
}

/* ==========================================================================
   Page transitions
   Leaving: transition.js grows a tinted curtain (from the clicked column on
   the home page). Arriving: the head script sets html.pt-in and the curtain
   below lifts with pure CSS, so a page never stays covered if JS fails.
   ========================================================================== */
html { --pt-color: var(--c-bg); }
html[data-pt="film"] { --pt-color: color-mix(in srgb, var(--c-film) 20%, #09090a); }
html[data-pt="3d"] { --pt-color: color-mix(in srgb, var(--c-3d) 18%, #09090a); }
html[data-pt="sound"] { --pt-color: color-mix(in srgb, var(--c-sound) 20%, #09090a); }
html[data-pt="developers"] { --pt-color: color-mix(in srgb, var(--c-developers) 16%, #09090a); }
html[data-pt="promotion"] { --pt-color: color-mix(in srgb, var(--c-promotion) 18%, #09090a); }
html.pt-in::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--pt-color);
  pointer-events: none;
  animation: pt-lift 1s cubic-bezier(0.76, 0, 0.24, 1) 0.25s forwards;
}
html.pt-in::before {
  content: attr(data-pt-label);
  position: fixed; left: 50%; top: 50%;
  z-index: 201;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg);
  pointer-events: none;
  animation: pt-fade 0.5s ease 0.15s forwards;
}
@keyframes pt-lift { to { clip-path: inset(0 0 100% 0); } }
html[data-pt-from="home"] { --brand-from: var(--c-accent); }
html[data-pt-from="film"] { --brand-from: var(--c-film); }
html[data-pt-from="3d"] { --brand-from: var(--c-3d); }
html[data-pt-from="sound"] { --brand-from: var(--c-sound); }
html[data-pt-from="developers"] { --brand-from: var(--c-developers); }
html[data-pt-from="promotion"] { --brand-from: var(--c-promotion); }
html.pt-in[data-pt-from] .site-header .brand__mark { animation: brand-in 0.9s var(--ease-out) 0.7s both; }
@keyframes brand-in { from { fill: var(--brand-from, var(--c-accent)); } }
@keyframes pt-fade { to { opacity: 0; transform: translate(-50%, -80%); } }

.pt-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  background: var(--pt-color, var(--c-bg));
  pointer-events: all;
}
.pt-overlay__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  html.pt-in::after, html.pt-in::before { display: none; }
  html.pt-in[data-pt-from] .site-header .brand__mark { animation: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  padding-top: var(--space-l);
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
}
.site-footer__top { row-gap: 48px; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand .brand__mark { width: 30px; }
.site-footer__brand .brand__word { font-size: 18px; }
.site-footer__tag { margin-top: 20px; max-width: 30ch; color: var(--c-fg-2); }
.site-footer__col { grid-column: span 6; display: grid; align-content: start; gap: 10px; }
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col .label { margin-bottom: 10px; }
.site-footer__col > :not(.label), .site-footer__col li { font-size: var(--fs-sm); color: var(--c-fg-2); }
.site-footer__col a:hover { color: var(--c-fg); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: var(--space-l);
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  color: var(--c-fg-3);
}
.site-footer__bottom a:hover { color: var(--c-fg); }
@media (min-width: 900px) {
  .site-footer__brand { grid-column: 1 / span 4; }
  .site-footer__col { grid-column: span 2; }
  .site-footer__col:first-of-type { grid-column: 5 / span 2; }
}

/* ==========================================================================
   Motion states
   Hidden states apply only when JS runs and motion is allowed, so content
   is always visible without JS and for reduced-motion users.
   ========================================================================== */
.js.motion [data-reveal="fade"],
.js.motion [data-reveal="rise"] { opacity: 0; }
.js.motion [data-reveal="lines"],
.js.motion [data-reveal="words"] { visibility: hidden; }
.js.motion [data-reveal="clip"] { clip-path: inset(100% 0 0 0); }
.js.motion [data-reveal="rule"] { transform: scaleX(0); }
.js.motion [data-hero="fade"] { opacity: 0; }
.js.motion [data-hero="lines"],
.js.motion .hero__title { visibility: hidden; }

.line-mask { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
/* SplitText line masks: room above the cap height for diacritics
   (Ü, É, Č, Ñ, Й) without moving the layout. flow-root on the split
   element stops the first mask's negative margin collapsing through it. */
:where(:has(> .split-line)) { padding-top: 0.2em; margin-top: -0.2em; }
:where(:has(> :has(> .split-line))) { display: flow-root; }

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

/* ---------- Menu strip: a second way through the site, on one line ---------- */
.menu__strip { margin-top: 36px; }
.menu__label { font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3); }
.menu__strip ul { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 14px; }
.menu__dir {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 15px;
  border: 1px solid var(--c-line); border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--c-fg-2);
  transition: color var(--dur-1) ease, border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.menu__dir span { color: var(--c-fg-3); }
.menu__dir i { width: 6px; height: 6px; background: var(--dot, transparent); border: 1px solid var(--dot, var(--c-fg-3)); transform: rotate(45deg); }
.menu__dir:hover, .menu__dir[aria-current="page"] { color: var(--c-fg); border-color: var(--dot, var(--c-line-2)); background: color-mix(in srgb, var(--dot, #fff) 8%, transparent); }
.menu__strip { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); }
.menu.is-open .menu__strip { opacity: 1; transform: none; transition-delay: 0.3s; }

/* ---------- Home header: the directions open under "Directions" ---------- */
.site-nav__has-sub { position: relative; }
.site-nav__sub {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 5;
  display: grid; gap: 2px; min-width: 210px; padding: 10px;
  border: 1px solid var(--c-line); background: rgb(13 13 15 / 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s linear 0.3s;
}
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* bridge for the pointer */
.site-nav__has-sub:hover .site-nav__sub, .site-nav__has-sub:focus-within .site-nav__sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.site-nav__sub a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--c-fg-2);
}
.site-nav__sub a span { color: var(--c-fg-3); }
.site-nav__sub a i { width: 6px; height: 6px; background: var(--dot); transform: rotate(45deg) scale(0.7); opacity: 0.6; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.site-nav__sub a:hover { color: var(--c-fg); background: rgb(237 235 230 / 0.04); }
.site-nav__sub a:hover i { transform: rotate(45deg) scale(1); opacity: 1; }

/* primary actions: a diamond (one BAZA cell) instead of an arrow */
.btn__arrow--d { width: 9px; height: 9px; fill: currentColor; }
.btn__arrow--d use { transition: transform var(--dur-2) var(--ease-out); }

/* the BAZA mark in the footer and the breadcrumbs takes the page colour, like the header */
.site-footer .brand__mark, .d-crumbs a svg { fill: var(--dir, var(--c-accent)); transition: fill 0.6s var(--ease-out); }

/* ---------- Big uppercase headings in every language but English ----------
   Cyrillic (Ё, Й, Д, Ц, Щ) and accented Latin (Ó, É, Ž, Ü, Ñ) reach above
   and below the capitals, so a line-height under 1 lets two lines touch.
   These headings get room between lines and slightly looser tracking.
   (html:not(:lang(en)) also wins over the single-class page rules.) */
html:not(:lang(en)) :is(.t-display, .d-h2, .d-hero__title, .d-intro__title, .mo__title, .room__name,
  .case__title, .steps__name, .dcase__name, .rot__title, .orb__title, .orb__cta-title, .wwd__title, .panel__name, .cf__title, .legal__title) {
  line-height: 1.04;
  letter-spacing: -0.028em;
}

/* Touch screens (phones, tablets, in-app browsers such as Instagram): a live
   blur behind the fixed header is re-rendered on every scrolled frame and is
   the main cause of stutter there. A near-solid bar looks the same on black. */
@media (hover: none), (pointer: coarse) {
  .site-header::before { background: rgb(10 10 11 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}