/* Bussola: the one stylesheet of bussola.company.
   Layers, from weakest to strongest. Colours are OKLCH tokens that follow the theme through light-dark(): the
   system's, or the one pinned with the header's switch (data-theme on <html>, set by theme.js and by the inline
   script in <head>). A browser without light-dark() gets the light theme in plain hex, and no switch.
   Everything newer than Baseline "widely available" is an enhancement: the page reads and works without it. */

@layer reset, tokens, base, layout, components, pages, utilities;

/* Fraunces (SIL Open Font License, assets/fonts/OFL.txt): roman with its weight and optical-size axes, SOFT and WONK
   pinned at 0; the italic is one static cut (weight 380, optical size 110) because only headlines use it. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-roman.f0b45b9cc0.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.0c8bdacec5.woff2") format("woff2");
  font-weight: 380;
  font-style: italic;
  font-display: swap;
}
/* Mea Culpa (SIL Open Font License, assets/fonts/OFL-mea-culpa.txt), a copperplate script with swash capitals, for the
   home page's title alone: cut down to Basic Latin, without hinting (19 KB), preloaded by the home page. */
@font-face {
  font-family: "Mea Culpa";
  src: url("/assets/fonts/mea-culpa.2a224fe17d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Georgia, resized to Fraunces's measurements, so the headline doesn't jump when the font arrives. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 94.52%;
  ascent-override: 103.47%;
  descent-override: 26.98%;
  line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100svh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  p, h1, h2, h3, li, dt, dd { overflow-wrap: break-word; }
  :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    --paper: light-dark(oklch(0.972 0.010 75), oklch(0.195 0.012 55));
    --paper-2: light-dark(oklch(0.948 0.015 72), oklch(0.228 0.014 55));
    --surface: light-dark(oklch(0.99 0.005 80), oklch(0.245 0.016 55));
    --ink: light-dark(oklch(0.27 0.032 52), oklch(0.935 0.014 78));
    --ink-2: light-dark(oklch(0.435 0.036 55), oklch(0.77 0.022 70));
    --brand: light-dark(oklch(0.43 0.075 50), oklch(0.785 0.085 66));
    --brand-hover: light-dark(oklch(0.37 0.068 48), oklch(0.845 0.075 70));
    --on-brand: light-dark(oklch(0.985 0.008 80), oklch(0.2 0.015 55));
    --accent: light-dark(oklch(0.47 0.095 52), oklch(0.8 0.095 64));
    --needle: light-dark(oklch(0.585 0.145 38), oklch(0.7 0.13 40));
    --error: light-dark(oklch(0.49 0.17 29), oklch(0.74 0.14 29));
    --ok: light-dark(oklch(0.47 0.1 150), oklch(0.78 0.12 150));

    /* The title's gilt: deep to bright, and the shine that crosses it once it's written. */
    --foil-1: light-dark(oklch(0.39 0.07 47), oklch(0.74 0.085 62));
    --foil-2: light-dark(oklch(0.55 0.11 58), oklch(0.88 0.075 78));
    --foil-shine: light-dark(oklch(0.72 0.12 72), oklch(0.98 0.03 90));
    /* The ribbon's folded tails, a step deeper than the ribbon (var(--brand)) in either theme. */
    --ribbon-fold: light-dark(oklch(0.33 0.06 46), oklch(0.66 0.085 60));
    /* The chart's half-winds, in the green of the portolan charts. */
    --chart-green: light-dark(oklch(0.5 0.09 150), oklch(0.76 0.09 150));

    --line: color-mix(in oklch, var(--ink) 14%, transparent);
    --line-strong: color-mix(in oklch, var(--ink) 28%, transparent);
    --field-border: color-mix(in oklch, var(--ink) 58%, var(--surface));
    --field-bg: color-mix(in oklch, var(--surface) 55%, var(--paper));
    --focus: var(--accent);
    --shadow: 0 1px 2px oklch(0.3 0.04 50 / 0.06), 0 14px 36px -14px oklch(0.3 0.04 50 / 0.2);

    --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
    --font-script: "Mea Culpa", "Fraunces", "Fraunces Fallback", Georgia, serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
    --step-2: clamp(1.4375rem, 1.25rem + 0.9vw, 1.9375rem);
    --step-3: clamp(1.875rem, 1.45rem + 2vw, 3.125rem);
    --step-4: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem);

    --wrap: 76rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --radius-s: 0.625rem;
    --radius-m: 1rem;
    --radius-l: 1.625rem;
    --header-h: 4.25rem;

    /* A damped spring from 0 to 1 (overshoot 37 %), sampled for linear(): the needle finding north. */
    --spring: linear(0, 0.069 2.5%, 0.246 5%, 0.487 7.5%, 0.745 10%, 0.984 12.5%, 1.175 15%, 1.304 17.5%, 1.365 20%, 1.366 22.5%, 1.318 25%, 1.238 27.5%, 1.143 30%, 1.049 32.5%, 0.968 35%, 0.908 37.5%, 0.872 40%, 0.861 42.5%, 0.871 45%, 0.896 47.5%, 0.929 50%, 0.965 52.5%, 0.998 55%, 1.024 57.5%, 1.042 60%, 1.051 62.5%, 1.051 65%, 1.044 67.5%, 1.033 70%, 1.02 72.5%, 1.007 75%, 0.995 77.5%, 0.987 80%, 0.982 82.5%, 0.981 85%, 0.982 87.5%, 0.986 90%, 0.99 92.5%, 0.995 95%, 1 97.5%, 1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @media (prefers-contrast: more) {
    :root {
      --ink-2: var(--ink);
      --line: color-mix(in oklch, var(--ink) 45%, transparent);
      --line-strong: color-mix(in oklch, var(--ink) 70%, transparent);
      --field-border: var(--ink);
    }
  }

  /* A theme pinned with the switch: light-dark() follows color-scheme, so this is all it takes. */
  @supports (color: light-dark(#000, #fff)) {
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"] { color-scheme: dark; }
  }

  @supports not (color: light-dark(#000, #fff)) {
    :root {
      color-scheme: light;
      --paper: #faf5ef; --paper-2: #f4ece3; --surface: #fefbf8;
      --ink: #332218; --ink-2: #5f4a3d;
      --brand: #704328; --brand-hover: #5d341e; --on-brand: #fdfaf4;
      --accent: #844a23; --needle: #c15735; --error: #ac281e; --ok: #296a3b;
      --foil-1: #704328; --foil-2: #8a5a2e; --foil-shine: #b98545; --ribbon-fold: #5d341e; --chart-green: #3f7a4f;
      --line: rgb(51 34 24 / 0.14); --line-strong: rgb(51 34 24 / 0.28);
      --field-border: #7d6a5e; --field-bg: #fcf8f3;
    }
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
    scrollbar-gutter: stable;
    hanging-punctuation: first last;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-kerning: normal;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 420;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    font-synthesis: none;
    font-optical-sizing: auto;
  }
  p, li, dd { text-wrap: pretty; }
  a {
    color: var(--accent);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.2em;
    &:hover { color: var(--ink); }
  }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  ::selection { background: color-mix(in oklch, var(--accent) 26%, transparent); }
  strong { font-weight: 650; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  /* A short window (a phone on its side, or text zoomed): the header scrolls away instead of covering the page. */
  @media (max-height: 30rem) {
    html { scroll-padding-block-start: 1rem; }
  }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  main:focus { outline: none; }
  .section { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
  .section--band { background: var(--paper-2); border-block: 1px solid var(--line); }
  .section__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
  .section__title { font-size: var(--step-3); font-weight: 400; letter-spacing: -0.02em; }
  .section__intro { margin-block-start: 1rem; font-size: var(--step-1); color: var(--ink-2); max-inline-size: 38rem; }
}

@layer components {
  /* ── Skip link ─────────────────────────────────────────────── */
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-s);
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    text-decoration: none;
    translate: 0 -250%;
    &:focus { translate: 0 0; }
  }

  /* ── Icons ─────────────────────────────────────────────────── */
  .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* A filled drawing (the translate mark on the language button): ink, no line. */
  .icon--filled { fill: currentColor; stroke: none; }

  /* ── The compass mark ──────────────────────────────────────── */
  .mark__disc, .mark__pivot { fill: var(--brand); }
  .mark__ticks { fill: none; stroke: var(--on-brand); stroke-opacity: 0.5; stroke-width: 3; stroke-linecap: round; }
  .mark__north { fill: var(--on-brand); }
  .mark__south { fill: var(--on-brand); fill-opacity: 0.4; }
  .mark__needle { transform-box: view-box; transform-origin: 32px 32px; }

  /* ── Header ────────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    container: header / inline-size;
    container: header / inline-size scroll-state;
    background: color-mix(in oklch, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    view-transition-name: site-header;
    @media (max-height: 30rem) { position: relative; }
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-block-size: var(--header-h);
    border-block-end: 1px solid transparent;
    transition: border-color 0.25s;
  }
  /* A hairline only once the header is stuck over the page (scroll-state queries; elsewhere: no line). */
  @container header scroll-state(stuck: top) {
    .site-header__inner { border-block-end-color: var(--line); }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.75rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-s);
    &:hover { color: var(--ink); }
  }
  .brand__mark { inline-size: 2.125rem; block-size: 2.125rem; flex: none; }
  .brand__name {
    font-family: var(--font-display);
    font-size: 1.4375rem;
    font-weight: 520;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .brand--small .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; }
  .brand--small .brand__name { font-size: 1.25rem; }

  .site-nav { display: flex; align-items: center; gap: 0.35rem; }

  /* The language button and the light/dark switch: quiet round buttons, 44 px. */
  .lang-button, .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Only where there's a real pointer: after a tap, a touch screen keeps :hover, and the switch would look held. */
    @media (hover: hover) {
      &:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); }
    }
    .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  }
  .theme-toggle {
    padding: 0;
    .icon { inline-size: 1.3rem; block-size: 1.3rem; }
  }
  /* The switch shows the theme the page is in: the sun in light, the moon in dark. */
  .theme-toggle__moon { display: none; }
  :root[data-theme="dark"] .theme-toggle {
    .theme-toggle__sun { display: none; }
    .theme-toggle__moon { display: block; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle {
      .theme-toggle__sun { display: none; }
      .theme-toggle__moon { display: block; }
    }
  }
  /* No switch where it can't work: without JavaScript, or without light-dark() (forced colours: at the end). */
  @media (scripting: none) {
    .theme-toggle { display: none; }
  }
  @supports not (color: light-dark(#000, #fff)) {
    .theme-toggle { display: none; }
  }

  /* The language menu: a popover under its button where anchor positioning exists, elsewhere dropping from the
     header's right edge. Without popovers the button and the menu go, and the footer's links remain. */
  .lang-menu {
    position: fixed;
    inset: calc(var(--header-h) - 0.25rem) max(var(--gutter), (100% - var(--wrap)) / 2) auto auto;
    margin: 0;
    min-inline-size: 12.5rem;
    padding: 0.375rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
  }
  /* Right-aligned under the button, at least 1rem from the screen's left edge; where there's no room for that (a
     narrow screen), centred under it (--lang-centred, at the end of the file). */
  @supports (position-anchor: --lang) {
    .lang-button { anchor-name: --lang; }
    .lang-menu {
      position-anchor: --lang;
      position-area: bottom span-left;
      position-try-fallbacks: --lang-centred, flip-inline;
      inset: auto;
      margin: 0.375rem 0 0 1rem;
    }
  }
  @supports selector(:popover-open) {
    .lang-button:has(+ .lang-menu:popover-open) { background: color-mix(in oklch, var(--ink) 7%, transparent); }
  }
  @supports not selector(:popover-open) {
    .lang-button, .lang-menu { display: none; }
  }
  .lang-menu__list { display: grid; gap: 0.125rem; }
  /* Each language: its round flag (decorative: the name says it), its name, and a check on the current one. */
  .lang-menu__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem 0.5rem 0.85rem;
    border-radius: var(--radius-s);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    &:hover { color: var(--ink); }
    @media (hover: hover) {
      &:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); }
    }
    &:focus-visible { outline-offset: -3px; }
    &[aria-current] { color: var(--accent); }
    > span { flex: 1; }
    .icon { inline-size: 1.1rem; block-size: 1.1rem; margin-inline-start: 0.3rem; stroke-width: 2.2; }
  }
  .lang-menu__flag { inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%; }

  .site-nav .button { white-space: nowrap; } /* a two-line pill looks broken: better a little tighter */

  /* Narrower headers (thresholds measured with the longest words, in every language): the language code goes (the
     translate mark stays: "IT" alone reads as a service), then the name and the button get smaller, then only the
     mark is left (its link keeps the name for screen readers). */
  @container header (width < 25rem) {
    .lang-button { padding: 0; }
    .lang-button__code { display: none; }
  }
  @container header (width < 24rem) {
    .brand__name { font-size: 1.3125rem; }
    .site-nav .button--small { padding-inline: 0.85rem; }
  }
  @container header (width < 22.5rem) {
    .site-header__inner:has(.site-nav .button) .brand__name { display: none; } /* the contact page has no button */
  }

  /* ── Buttons ───────────────────────────────────────────────── */
  .button {
    --button-bg: transparent;
    --button-fg: var(--ink);
    --button-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: 2.75rem;
    padding: 0.6rem 1.25rem;
    border: 1.5px solid var(--button-border);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, scale 0.15s;
    &:hover { color: var(--button-fg); }
    &:active { scale: 0.98; }
    .icon { inline-size: 1.15em; block-size: 1.15em; transition: translate 0.2s var(--ease-out); }
  }
  .button--primary {
    --button-bg: var(--brand);
    --button-fg: var(--on-brand);
    &:hover { --button-bg: var(--brand-hover); }
    &:hover .icon { translate: 0.18em 0; }
  }
  .button--quiet {
    --button-border: var(--line-strong);
    &:hover { --button-bg: color-mix(in oklch, var(--ink) 6%, transparent); }
  }
  .button--link {
    --button-fg: var(--accent);
    padding-inline: 0.5rem;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.2em;
  }
  .button--small { padding: 0.5rem 1.05rem; font-size: 0.9375rem; }
  .button--large { min-block-size: 3.25rem; padding: 0.8rem 1.6rem; font-size: 1.0625rem; }

  /* ── Eyebrow (the small line above a title) ────────────────── */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.1rem;
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    &::before { content: ""; inline-size: 1.75rem; block-size: 1.5px; background: currentColor; flex: none; }
  }

  /* ── Cards with the Apple-style continuous corner, where supported ── */
  @supports (corner-shape: squircle) {
    .service, .client__tile, .form, .form-success, .cta__inner, .toggletip {
      corner-shape: squircle;
      border-radius: calc(var(--radius-l) * 1.7);
    }
  }
}

@layer pages {
  /* ── Home: hero ────────────────────────────────────────────── */
  /* The hero spans the page's width, so the chart behind the compass reaches both edges; it clips what goes past. */
  .hero {
    position: relative;
    overflow: clip;
    /* The chart's lines fade out under the header and before the next section, instead of stopping at a hard edge. */
    &::before, &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      z-index: 0;
      block-size: clamp(3rem, 2rem + 4vw, 6rem);
      pointer-events: none;
    }
    &::before { inset-block-start: 0; background: linear-gradient(var(--paper), transparent); }
    &::after { inset-block-end: 0; background: linear-gradient(transparent, var(--paper)); }
  }
  .hero__inner {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 4rem);
    align-items: center;
    padding-block: clamp(2.25rem, 1.25rem + 4.5vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 7rem);
    @media (width >= 62rem) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  }
  /* Above the chart's lines, which come from the compass beside it. */
  .hero__text { position: relative; z-index: 1; container: hero-text / inline-size; }

  /* The studio's name in Mea Culpa, two lines in gilt. A wordmark: it can't be selected (the rest of the hero can).
     Each line's box is padded so the swashes stay inside it (the gilt and the writing only paint inside the box),
     and the padding is taken back with margins. */
  .hero__title {
    margin-block: -0.08em 0.2em; /* room for the swashes under "Company" */
    font-family: var(--font-script);
    font-size: clamp(3.5rem, 17.5cqi, 8.5rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
    -webkit-user-select: none;
    user-select: none;
  }
  .hero__line {
    display: block;
    inline-size: fit-content;
    padding: 0.16em 0.3em 0.34em;
    margin: -0.16em -0.3em -0.34em;
    color: var(--brand); /* what a browser without background-clip: text shows, and what contrast checkers read */
    background:
      linear-gradient(100deg, transparent 35%, var(--foil-shine) 50%, transparent 65%) -150% 0 / 45% 100% no-repeat,
      linear-gradient(100deg, var(--foil-1) 10%, var(--foil-2) 52%, var(--foil-1) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__line + .hero__line { margin-inline-start: 0.42em; } /* "Company" steps in under "Bussola", as a signature does */
  .hero__tagline {
    margin-block-start: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 380;
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
    & em { font-style: italic; color: var(--accent); }
  }
  .hero__lead {
    margin-block-start: 1.25rem;
    max-inline-size: 36rem;
    color: var(--ink-2);
    font-size: var(--step-1);
    line-height: 1.5;
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2.25rem;
    /* On a phone the two buttons stack at full width rather than wrapping at two different widths. */
    @media (width < 30rem) { flex-direction: column; }
  }
  .hero__art {
    position: relative;
    isolation: isolate;
    justify-self: center;
    inline-size: min(84%, 23rem);
    @media (width >= 62rem) { inline-size: min(100%, 33rem); }
    /* A warm light behind the compass. */
    &::before {
      content: "";
      position: absolute;
      inset: -22%;
      z-index: -1;
      border-radius: 50%;
      background: radial-gradient(closest-side, color-mix(in oklch, var(--accent) 14%, transparent), transparent);
      pointer-events: none;
    }
  }

  /* The chart (compass.mjs, chart()): the rhumb lines run on from the compass across the hero, fading with distance.
     The course is the one compass.js turns towards the pointer. */
  .chart {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    & path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
  }
  .chart__wind-from { stop-color: color-mix(in oklch, var(--ink) 14%, transparent); }
  .chart__half-from { stop-color: color-mix(in oklch, var(--chart-green) 22%, transparent); }
  .chart__quarter-from { stop-color: color-mix(in oklch, var(--needle) 18%, transparent); }
  .chart__to { stop-color: transparent; }
  .chart__course-from { stop-color: var(--needle); }
  .chart__course-to { stop-color: color-mix(in oklch, var(--needle) 0%, transparent); }
  .chart__course {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 320px 320px;
    transition: opacity 0.4s, rotate 0.35s var(--ease-out);
    & path { stroke-width: 1.75; }
  }
  .hero.is-steering .chart__course { opacity: 0.6; }

  /* The compass is a button: it unfurls the ribbon (compass.js). Artwork: never selected, no callout on a long press. */
  .compass {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    &:focus-visible { outline-offset: 0.5rem; }
  }

  /* The compass rose (compass.mjs draws it; here it gets its colours and its motion). */
  .rose { inline-size: 100%; block-size: auto; aspect-ratio: 1; overflow: visible; }
  .rose__rhumbs { fill: none; stroke: color-mix(in oklch, var(--ink) 11%, transparent); stroke-width: 1; }
  .rose__ring { fill: none; stroke: color-mix(in oklch, var(--ink) 38%, transparent); stroke-width: 1.25; }
  .rose__ring--inner { stroke: color-mix(in oklch, var(--ink) 16%, transparent); transition: stroke 0.4s; }
  .compass[aria-expanded="true"] .rose__ring--inner { stroke: color-mix(in oklch, var(--needle) 60%, transparent); }
  .rose__ticks { fill: none; stroke: color-mix(in oklch, var(--ink) 42%, transparent); stroke-width: 1.25; }
  .rose__dark { fill: var(--brand); }
  .rose__light { fill: var(--paper); stroke: color-mix(in oklch, var(--brand) 60%, transparent); stroke-width: 1.25; stroke-linejoin: round; }
  .rose__letters text {
    fill: var(--ink-2);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: central;
  }
  .rose__needle-n { fill: var(--needle); }
  .rose__needle-s { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
  .rose__cap { fill: var(--brand); }
  .rose__pin { fill: var(--paper); }
  .rose__ping { fill: none; stroke: var(--needle); stroke-width: 2; opacity: 0; }
  .rose__dial, .rose__needle, .rose__needle-turn, .rose__ping { transform-box: view-box; transform-origin: 320px 320px; }

  /* The ribbon the compass unfurls, across its lower half, with the studio's motto. Folded away it's out of sight
     and out of the accessibility tree (visibility), so aria-expanded tells the truth. It never takes the pointer: the
     compass under it keeps the hover. */
  .compass-quote {
    position: absolute;
    inset-block-end: 12%;
    inset-inline-start: 50%;
    inline-size: max-content;
    max-inline-size: calc(100vw - 2 * var(--gutter) - 2.5rem);
    translate: -50% 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    visibility: hidden;
    opacity: 0;
  }
  .compass[aria-expanded="true"] + .compass-quote { visibility: visible; opacity: 1; }
  /* Without JavaScript the button can't keep a state: the ribbon shows while the compass is pointed at or focused. */
  @media (scripting: none) {
    .compass:is(:hover, :focus-visible) + .compass-quote { visibility: visible; opacity: 1; }
  }
  .compass-quote__ribbon {
    position: relative;
    display: block;
    padding: 0.32em 0.9em 0.42em;
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: inset 0 -0.5em 0.8em -0.6em oklch(0.15 0.03 45 / 0.35), 0 0.7em 1.2em -0.7em oklch(0.2 0.04 50 / 0.45);
    font-family: var(--font-script);
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
    outline: 1px solid color-mix(in oklch, var(--on-brand) 38%, transparent); /* an engraved rule inside the edge */
    outline-offset: -0.24em;
    /* The two tails, folded back under the ribbon's ends and cut in a swallowtail; their inner part, under the
       ribbon's lower corners, is the fold. */
    &::before, &::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset-block: 0.38em -0.38em;
      inline-size: 1.45em;
      background: var(--ribbon-fold);
    }
    &::before {
      inset-inline-start: -1.05em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.42em 50%);
    }
    &::after {
      inset-inline-end: -1.05em;
      clip-path: polygon(0 0, 100% 0, calc(100% - 0.42em) 50%, 100% 100%, 0 100%);
    }
  }
  .compass-quote__apos { margin-inline: -0.09em -0.07em; }

  /* ── Home: services ────────────────────────────────────────── */
  .services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
  }
  .service {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0.9rem;
    align-content: start;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
  }
  .service__icon {
    inline-size: 2.875rem;
    block-size: 2.875rem;
    padding: 0.65rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    color: var(--accent);
  }
  .service__title { font-size: var(--step-2); }
  .service__text { color: var(--ink-2); }
  .service__points {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--step--1);
    & li { display: flex; gap: 0.65rem; align-items: baseline; }
    & li::before {
      content: "";
      inline-size: 0.4rem;
      block-size: 0.4rem;
      flex: none;
      border-radius: 50%;
      background: var(--accent);
      translate: 0 -0.12em;
    }
  }

  /* ── Home: principles (N, E, S, W) ─────────────────────────── */
  .principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(2rem, 1rem + 4vw, 5rem);
  }
  .principle__title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 420;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .principle__point {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 520;
    letter-spacing: 0;
  }
  .principle__text { margin-block-start: 0.6rem; margin-inline-start: 3.75rem; color: var(--ink-2); }

  /* ── Home: clients ─────────────────────────────────────────── */
  #clients { container: clients / inline-size; }
  .clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    column-gap: 1.5rem;
    margin-block-end: -2.75rem; /* takes back the space under the last row of cards (the margin of .client__work) */
  }
  /* The cards share the list's rows (subgrid), so tiles, names, sectors and works line up across a row. Neither the
     list nor the cards have a row gap, the spaces are margins on the parts: a subgrid whose gap differs from its
     parent's gives its items a negative margin for the difference, which squeezes a short row to nothing and leaves
     empty space under its text (a one-line sector had 15 px more under it than a two-line one). */
  .client {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .client__tile {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    margin-block-end: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper-2);
    overflow: hidden;
  }
  /* Each logo is a one-colour SVG used as a mask, painted in the text colour: it follows the theme on its own. */
  /* The box the logo fits in: a share of the tile, capped, so a wider tile doesn't mean a bigger logo. */
  .client__logo {
    inline-size: min(var(--logo-w, 60%), var(--logo-max, 14rem));
    block-size: var(--logo-h, 46%);
    background: var(--ink);
    opacity: 0.88;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
  }
  /* Each client's logo and its box: clients.css, loaded only by the home pages that show the clients, so a page built
     without them (switched off from bussola.company/admin, switches.mjs) names none of them, not even here. */
  .client__name { font-size: var(--step-1); font-weight: 460; }
  .client__sector { margin-block-start: 1.15rem; color: var(--accent); font-size: var(--step--1); font-weight: 650; }
  /* What the studio did for the client, under a label that says so: a small line of capitals, then the work itself. */
  .client__work { margin-block: 1.35rem 2.75rem; }
  .client__label {
    margin-block-end: 0.2rem;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .client__what { color: var(--ink-2); }

  /* Wide (after the base rules, which it overrides): rows of three cards, and no row left half-empty, however many
     clients there are: a last row of two gets wider cards, and a lone last card joins the three before it, two by two. */
  @container clients (width >= 58rem) {
    .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .client { grid-column: span 2; }
    .client:nth-child(3n + 1):is(:nth-last-child(2), :nth-last-child(4)),
    .client:nth-child(3n + 1):is(:nth-last-child(2), :nth-last-child(4)) ~ .client { grid-column: span 3; }
    .client__tile { aspect-ratio: auto; block-size: 13rem; } /* one height for every row */
  }

  /* ── Home: closing call to action ──────────────────────────── */
  .cta { padding-block-end: clamp(4rem, 3rem + 5vw, 7.5rem); }
  .cta__inner {
    --focus: var(--on-brand);
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
    border-radius: calc(var(--radius-l) * 1.25);
    background: var(--brand);
    color: var(--on-brand);
    text-align: center;
    .button--primary { --button-bg: var(--on-brand); --button-fg: var(--brand); }
    .button--primary:hover { --button-bg: color-mix(in oklch, var(--on-brand) 88%, var(--brand)); }
  }
  .cta__mark {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    .mark__disc, .mark__pivot { fill: var(--on-brand); }
    .mark__ticks { stroke: var(--brand); }
    .mark__north { fill: var(--brand); }
    .mark__south { fill: var(--brand); }
  }
  .cta__title { max-inline-size: 22ch; font-size: var(--step-3); font-weight: 380; letter-spacing: -0.02em; }
  .cta__text { max-inline-size: 36rem; font-size: var(--step-1); }

  /* ── Footer ────────────────────────────────────────────────── */
  .site-footer {
    padding-block: 2.75rem 3rem;
    border-block-start: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--step--1);
  }
  /* The pages and the other languages are two groups: on a phone one under the other, on a wider screen the pages
     beside the brand and the languages beside the legal line, both on the right. */
  .site-footer__inner {
    display: grid;
    grid-template-areas: "brand" "nav" "langs" "legal";
    gap: 1.25rem 3rem;
    @media (width >= 48rem) {
      grid-template-columns: 1fr auto;
      grid-template-areas: "brand nav" "legal langs";
      align-items: start;
      .site-footer__nav, .site-footer__langs { justify-self: end; }
      .site-footer__legal, .site-footer__langs { align-self: center; }
    }
  }
  /* The languages switched off (switches.mjs): no row or cell waits for them. */
  .site-footer__inner--one-language {
    grid-template-areas: "brand" "nav" "legal";
    @media (width >= 48rem) { grid-template-areas: "brand nav" "legal legal"; }
  }
  .site-footer__brand { grid-area: brand; display: grid; gap: 0.35rem; justify-items: start; }
  .site-footer__nav { grid-area: nav; }
  .site-footer__langs { grid-area: langs; }
  :is(.site-footer__nav, .site-footer__langs) ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  :is(.site-footer__nav, .site-footer__langs) a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ink);
    font-weight: 600;
    &[aria-current="page"] { text-decoration-thickness: 2px; }
  }
  /* Each language with its round flag, as in the header's menu (decorative: the name is written next to it). */
  .site-footer__langs a { gap: 0.5rem; }
  .site-footer__flag { inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%; }
  .site-footer__legal { grid-area: legal; }
  /* The shield before "no tracking cookies". */
  .site-footer__note .icon {
    display: inline-block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-inline-end: 0.35rem;
    vertical-align: -0.24em;
    color: var(--accent);
  }

  /* ── Contact page ──────────────────────────────────────────── */
  .contact {
    display: grid;
    grid-template-areas: "intro" "panel" "next";
    gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 3rem + 5vw, 7.5rem);
    @media (width >= 62rem) {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      grid-template-areas: "intro panel" "next panel";
      grid-template-rows: auto 1fr;
      column-gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
  }
  .contact__intro { grid-area: intro; }
  .contact__panel { grid-area: panel; }
  .contact__next { grid-area: next; }
  .contact__title { font-size: var(--step-4); font-weight: 380; letter-spacing: -0.028em; line-height: 1.02; }
  .contact__lead { margin-block-start: 1.25rem; max-inline-size: 32rem; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
  .contact__email { margin-block-start: 0.75rem; max-inline-size: 32rem; color: var(--ink-2); line-height: 1.5; }
  .contact__next-title { font-size: var(--step-1); font-weight: 460; }
  .steps {
    display: grid;
    gap: 1rem;
    margin-block-start: 1.25rem;
    counter-reset: step;
    & li {
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      gap: 1rem;
      align-items: center;
      color: var(--ink-2);
      counter-increment: step;
    }
    & li::before {
      content: counter(step);
      display: grid;
      place-items: center;
      inline-size: 2.25rem;
      block-size: 2.25rem;
      border: 1.5px solid var(--line-strong);
      border-radius: 50%;
      color: var(--accent);
      font-family: var(--font-display);
      font-size: 1.125rem;
    }
  }

  /* The form. Errors show in text and in the border, never in colour alone. */
  .form, .form-success {
    padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .form { display: grid; gap: 1.5rem; }
  .form__title { font-size: var(--step-2); }
  .field { display: grid; gap: 0.45rem; }
  .field__label { font-weight: 650; }
  .field__optional { color: var(--ink-2); font-weight: 400; }
  .field__hint { color: var(--ink-2); font-size: var(--step--1); }
  .field__error {
    color: var(--error);
    font-size: var(--step--1);
    font-weight: 650;
    &:empty { display: none; }
  }
  .field__input {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    color: var(--ink);
    font-size: max(1rem, 16px);
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
    &:hover { border-color: var(--ink); }
    &:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
    &:user-invalid { border-color: var(--error); }
    &[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
  }
  .field__input--area {
    min-block-size: 9.5rem;
    max-block-size: 32rem;
    resize: vertical;
    field-sizing: content;
  }
  .field:has([aria-invalid="true"]) {
    padding-inline-start: 0.9rem;
    border-inline-start: 3px solid var(--error);
  }

  .chips__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.2rem; }
  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--field-border);
    border-radius: 999px;
    background: var(--field-bg);
    font-size: 0.9375rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    &:hover { border-color: var(--ink); }
    &:has(:checked) { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
    &:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  }
  .chip__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .chip__check { display: none; inline-size: 1rem; block-size: 1rem; stroke-width: 2.4; }
  .chip:has(:checked) .chip__check { display: block; }

  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Always in the page (a live region must exist before it speaks); empty, it gives back the gap it would add. */
  .form__alert {
    color: var(--error);
    font-weight: 650;
    &:empty { margin-block-end: -1.5rem; }
    &:not(:empty) {
      padding: 0.9rem 1rem;
      border: 1.5px solid color-mix(in oklch, var(--error) 45%, transparent);
      border-radius: var(--radius-s);
      background: color-mix(in oklch, var(--error) 8%, var(--surface));
    }
  }
  .form__submit { inline-size: 100%; }
  .form.is-busy .form__submit {
    cursor: progress;
    .icon { display: none; }
    &::after {
      content: "";
      inline-size: 1.1rem;
      block-size: 1.1rem;
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
  }
  .form__privacy, .form__noscript { color: var(--ink-2); font-size: var(--step--1); }
  .form__noscript { color: var(--ink); font-weight: 650; }

  .shield-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 2.75rem;
    padding: 0.25rem 0.1rem;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: var(--step--1);
    font-weight: 650;
    text-decoration: underline dotted;
    text-underline-offset: 0.25em;
    cursor: pointer;
    anchor-name: --shield;
    &:hover { color: var(--ink); }
    .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  }
  .toggletip {
    max-inline-size: min(23rem, calc(100vw - 2rem));
    padding: 1.15rem 1.25rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: var(--step--1);
  }
  .toggletip__title { font-weight: 650; }
  .toggletip__text { margin-block: 0.4rem 0.75rem; color: var(--ink-2); }
  /* Above its button where anchor positioning exists, starting at the button and shrinking to the space left before
     the screen's edge (or below it, if there's no room above); elsewhere it sits in the middle of the screen. */
  @supports (position-anchor: --shield) {
    .toggletip {
      position-anchor: --shield;
      position-area: top span-right;
      position-try-fallbacks: flip-block;
      inset: auto;
      margin: 0 1rem 0.5rem 0;
    }
  }
  @supports selector(:popover-open) {
    .toggletip {
      opacity: 0;
      translate: 0 0.4rem;
      transition: opacity 0.18s, translate 0.18s var(--ease-out), overlay 0.18s allow-discrete, display 0.18s allow-discrete;
      &:popover-open { opacity: 1; translate: 0 0; }
    }
    @starting-style {
      .toggletip:popover-open { opacity: 0; translate: 0 0.4rem; }
    }
  }

  .form-success {
    display: grid;
    justify-items: start;
    gap: 1rem;
    &:focus:not(:focus-visible) { outline: none; }
  }
  .form-success__icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--ok) 14%, transparent);
    color: var(--ok);
    stroke-width: 2.2;
  }
  .form-success__title { font-size: var(--step-2); }
  .form-success__text { color: var(--ink-2); }
  .form-success__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; }

  /* ── Privacy page ──────────────────────────────────────────── */
  .prose {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 3rem + 5vw, 7.5rem);
    & > * { max-inline-size: 44rem; }
    & h2 { margin-block: 2.5rem 0.75rem; font-size: var(--step-2); }
    & p + p, & p + ul { margin-block-start: 0.9rem; }
    & ul { display: grid; gap: 0.6rem; padding-inline-start: 1.25rem; }
    & li::marker { color: var(--accent); }
  }
  .prose__title { font-size: var(--step-4); font-weight: 380; letter-spacing: -0.028em; line-height: 1.02; }
  .prose__updated { margin-block: 1rem 1rem; color: var(--ink-2); }
  /* The switch "count my visits or not" (stats.js shows it; hidden without JavaScript, where nothing is counted). */
  .stats-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-block-start: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }
  .stats-choice__status { flex: 1 1 16rem; font-weight: 600; }
  .stats-choice__noscript { margin-block-start: 1rem; color: var(--ink-2); }

  /* ── 404 ───────────────────────────────────────────────────── */
  .not-found {
    display: grid;
    justify-items: start;
    gap: 1.1rem;
    padding-block: clamp(4rem, 3rem + 6vw, 9rem);
  }
  .not-found__mark { inline-size: 4.5rem; block-size: 4.5rem; }
  .not-found__title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 380; line-height: 1.02; letter-spacing: -0.028em; }
  .not-found__title--small { font-size: var(--step-2); }
  /* The same words in the other languages: side by side where there's room. */
  .not-found__others {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem 3rem;
    justify-self: stretch;
    max-inline-size: 48rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    color: var(--ink-2);
  }
  .not-found__other { display: grid; gap: 0.6rem; align-content: start; }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ── Motion: only for those who haven't asked for less ─────── */
@media (prefers-reduced-motion: no-preference) {
  /* Cross-document view transitions between pages (Chrome, Edge, Safari): the header stays put, the rest fades. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }

  /* The needle swings and settles on north when the page opens. */
  .rose__needle { animation: needle-settle 2.4s var(--ease-out) 0.25s both; animation-timing-function: var(--spring); }
  @keyframes needle-settle { from { rotate: 58deg; } to { rotate: 0deg; } }

  /* The title writes itself in, line after line (a soft edge sweeping left to right), then a shine crosses the gilt. */
  .hero__line {
    -webkit-mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
    mask: linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
    animation: title-write 1.25s cubic-bezier(0.45, 0.05, 0.3, 1) 0.2s both, title-shine 1.5s ease-in-out 2.2s both;
  }
  .hero__line + .hero__line { animation-delay: 0.95s, 2.45s; }
  @keyframes title-write { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
  @keyframes title-shine { to { background-position: 250% 0, 0 0; } }

  /* The ribbon unrolls from its middle and rolls back up. */
  .compass-quote {
    clip-path: inset(-50% 50%);
    transition: clip-path 0.45s var(--ease-out), opacity 0.3s, visibility 0s linear 0.45s;
  }
  .compass[aria-expanded="true"] + .compass-quote {
    clip-path: inset(-50% -3em);
    transition: clip-path 0.75s var(--ease-out), opacity 0.2s, visibility 0s;
  }
  @media (scripting: none) {
    .compass:is(:hover, :focus-visible) + .compass-quote { clip-path: inset(-50% -3em); transition: clip-path 0.75s var(--ease-out), opacity 0.2s, visibility 0s; }
  }

  /* On a touch screen, where nothing hovers, a ring pulses twice round the compass once its needle has settled: it
     can be tapped. */
  @media (hover: none) {
    .rose__ping { animation: compass-ping 1.7s ease-out 2.9s 2; }
    @keyframes compass-ping { from { opacity: 0.6; scale: 0.96; } to { opacity: 0; scale: 1.14; } }
  }
  .compass:active .rose { scale: 0.985; }
  .rose { transition: scale 0.15s; }

  /* As you scroll, the dial turns and the needle keeps pointing north, as on a real compass. */
  @supports (animation-timeline: scroll()) {
    .rose__dial { animation: dial-turn linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    @keyframes dial-turn { to { rotate: -40deg; } }
  }

  /* The language menu slides down a touch as it opens. */
  @supports selector(:popover-open) {
    .lang-menu {
      opacity: 0;
      translate: 0 -0.3rem;
      transition: opacity 0.16s, translate 0.16s var(--ease-out), overlay 0.16s allow-discrete, display 0.16s allow-discrete;
      &:popover-open { opacity: 1; translate: 0 0; }
    }
    @starting-style {
      .lang-menu:popover-open { opacity: 0; translate: 0 -0.3rem; }
    }
  }

  /* The logo's needle gives a little swing on hover. */
  .brand:hover .mark__needle { animation: needle-wiggle 0.9s var(--ease-out); }
  @keyframes needle-wiggle { 25% { rotate: 22deg; } 50% { rotate: -12deg; } 75% { rotate: 5deg; } }

  /* 404: the needle hunts for north twice, then gives up at an odd angle (under five seconds in all). */
  .not-found__mark .mark__needle { animation: needle-lost 2.2s ease-in-out 2 both; }
  @keyframes needle-lost { 30% { rotate: 150deg; } 55% { rotate: 95deg; } 80% { rotate: 215deg; } to { rotate: 200deg; } }
}

@keyframes spin { to { rotate: 1turn; } }

/* The language menu's second place (components: .lang-menu), centred under its button. */
@position-try --lang-centred {
  position-area: bottom;
  margin: 0.375rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .form.is-busy .form__submit::after { animation-duration: 2.4s; }
}

@media (forced-colors: active) {
  .theme-toggle { display: none; } /* the system's colours win anyway: the switch would change nothing */
  .client__logo { forced-color-adjust: none; background: CanvasText; }
  .chip:has(:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .mark__disc, .mark__pivot { fill: CanvasText; }
  .mark__north, .mark__south { fill: Canvas; }
  .mark__ticks { stroke: Canvas; }
  .button { border-color: ButtonText; }
  .hero__line { -webkit-text-fill-color: CanvasText; background: none; }
  .compass-quote__ribbon { border: 1px solid CanvasText; }
}

@media print {
  :root { color-scheme: light; } /* paper is light, whatever the screen's theme: every light-dark() follows */
  .site-header, .skip-link, .hero__art, .cta, .form__shield, .site-footer__nav, .site-footer__langs { display: none !important; }
  body { background: #fff; color: #000; }
  * { animation: none !important; }
}