/* ---- Qdenza tokens. These are unlayered, so they beat the engine's @layer sw defaults. ---- */
  :root, .sw-root {
    --sw-bg:        #FBFCFD;   /* paper — identical to the scene background, so posters are seamless */
    --sw-ink:       #101418;   /* ink */
    --sw-ink-soft:  #5A6478;   /* text 2 */
    --sw-accent:    #1B4FE8;   /* cobalt — per-scene accents override this at runtime */
    --sw-font-display: 'Onest', system-ui, sans-serif;
    --sw-font-body:    'Golos Text', system-ui, sans-serif;

    --q-line:   #E4E7EF;       /* borders */
    --q-mist:   #F2F5FB;
    --q-coral:  #FF5A3C;       /* urgency only — one scene, never again */
  }

  /* ---- Brand corrections on top of the engine's defaults ----------------------------
     The engine ships a generic "startup" chrome (700-weight rounded display, gradient
     blob mark, tracked-caps eyebrow, graphite CTA). Qdenza's identity is lighter and
     quieter than that, so each of these is pulled back onto the brand. ------------- */

  /* The mark is the real Qdenza symbol, injected below — not a gradient blob. */
  /* 4:3 to match the mark's viewBox — a 34x27 box squashed it. */
  .sw-brand__mark { width:36px; height:27px; border-radius:0; background:none; box-shadow:none; display:block; }
  .sw-brand__mark svg { width:100%; height:100%; display:block; }
  /* The name is drawn lettering, not type — the engine's text node is replaced
     by the wordmark below, with the words kept for screen readers. */
  .sw-brand__name { display:flex; align-items:center; }
  .sw-brand__name svg { height:19px; width:auto; display:block; }
  .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

  /* Onest is a light display face in this brand — 300 for the big lines, never 700. */
  .sw-copy__title {
    font-weight:300; letter-spacing:-.02em; line-height:1.04;
    font-size:clamp(2.1rem,4.8vw,3.9rem);
    text-wrap:balance; text-shadow:none;
  }
  .sw-copy__body { font-family:var(--sw-font-body); text-wrap:pretty; text-shadow:none; max-width:42ch; }

  /* One eyebrow in the whole film (scene 1). Not a tracked-caps section label.
     The engine paints it in the raw scene accent; coral #FF5A3C is only 3.0:1 on
     paper, so as body-size text it fails AA. Darkening the accent 25% toward ink
     takes coral to 4.8:1 and cobalt to 8.4:1 while keeping both on-hue. The bright
     coral stays where it belongs: the route dot and the progress bar, which are
     graphics and only owe 3:1. */
  .sw-copy__eyebrow {
    text-transform:none; letter-spacing:0; font-weight:500; font-size:.95rem;
    margin-top:14px;
    color:color-mix(in srgb, var(--sw-accent) 75%, #101418);
  }
  /* Scene counter: the film has no other progress signal, so it stays — in Onest, not mono. */
  .sw-copy__num { font-family:var(--sw-font-display); font-variant-numeric:tabular-nums; letter-spacing:.14em; }

  /* Proof chips follow the brand's bordered-pill, not an accent-tinted blob. */
  .sw-copy__tags li {
    background:#fff; border:1px solid var(--q-line); color:var(--sw-ink-soft);
    font-family:var(--sw-font-body); font-weight:500; font-size:.84rem;
  }

  /* Cobalt is the action colour in this brand; graphite is not. */
  .sw-topcta, .sw-btn--primary { background:#1B4FE8; color:#FBFCFD; font-family:var(--sw-font-display); font-weight:500; }
  .sw-topcta:hover, .sw-btn--primary:hover { background:#173FBC; }
  .sw-btn--ghost { border-color:var(--q-line); background:#fff; font-family:var(--sw-font-display); font-weight:500; }
  .sw-btn--ghost:hover { border-color:var(--sw-ink); }
  .sw-nav, .sw-nav__item, .sw-hint, .sw-route__label { font-family:var(--sw-font-display); }
  .sw-nav { border-color:var(--q-line); }
  .sw-nav__item.is-active { background:#1B4FE8; color:#fff; }

  /* Scenes are full-bleed, so the sky only shows on first paint. Keep it plain paper. */
  .sw-pt { display:none; }

  /* ---- The landing strip after the flight -------------------------------------------
     The engine's stage/copy/route are position:fixed, so the footer lifts above them
     and the fixed chrome fades out once the footer is on screen. -------------------- */
  .q-footer {
    position:relative; z-index:70; background:var(--sw-bg);
    border-top:1px solid var(--q-line);
    font-family:var(--sw-font-body); color:var(--sw-ink);
  }
  .q-footer__in {
    max-width:1180px; margin:0 auto;
    padding:clamp(56px,7vw,92px) clamp(20px,4vw,48px) clamp(40px,4vw,56px);
    display:grid; gap:clamp(32px,4vw,56px);
    grid-template-columns:1fr;
  }
  /* The lead column carries a display line; give it room before the link columns. */
  @media (min-width:880px) { .q-footer__in { grid-template-columns:1.6fr 1fr 1fr; } }
  .q-footer h2 {
    font-family:var(--sw-font-display); font-weight:300; letter-spacing:-.02em;
    font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1; margin:0 0 14px; text-wrap:balance;
  }
  .q-footer p { margin:0 0 18px; line-height:1.6; color:var(--sw-ink-soft); max-width:46ch; }
  .q-footer a { color:#1B4FE8; text-decoration:none; }
  .q-footer a:hover { color:var(--sw-ink); }
  .q-h { font-family:var(--sw-font-display); font-weight:500; font-size:.92rem; margin:0 0 12px; color:var(--sw-ink); }
  .q-list { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.94rem; }
  .q-note {
    grid-column:1/-1; border-top:1px solid var(--q-line); padding-top:22px;
    display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline;
    font-size:.84rem; color:var(--sw-ink-soft);
  }
  .q-note strong { font-family:var(--sw-font-display); font-weight:500; color:var(--sw-ink); }

  /* Once the footer is in view the film's fixed chrome gets out of the way. */
  body.at-footer .sw-copylayer,
  body.at-footer .sw-route,
  body.at-footer .sw-hint,
  body.at-footer .sw-scrollbar { opacity:0; pointer-events:none; transition:opacity .35s ease; }
  body.at-footer .sw-topbar { opacity:0; pointer-events:none; transition:opacity .35s ease; }

  @media (prefers-reduced-motion:reduce) {
    body.at-footer .sw-copylayer, body.at-footer .sw-route,
    body.at-footer .sw-hint, body.at-footer .sw-topbar { transition:none; }
  }
  /* On phones the copy stacks tall against the scene. The engine's bottom scrim
     fades out under the eyebrow, so extend it and hold it opaque longer. */
  @media (max-width:860px) {
    .q-footer__in { padding-top:clamp(44px,9vw,64px); }
    .sw-copylayer::before {
      height:78%;
      background:linear-gradient(0deg,
        var(--sw-bg) 14%,
        color-mix(in srgb, var(--sw-bg) 86%, transparent) 46%,
        color-mix(in srgb, var(--sw-bg) 45%, transparent) 68%,
        transparent 100%);
    }
    /* Clear the scroll hint: the engine parks it 20px off the bottom and the tag
       row was landing right on top of it. */
    .sw-copy { bottom:calc(clamp(96px,17dvh,150px) + env(safe-area-inset-bottom)); }
  }

  /* ---- Language switch -------------------------------------------------------------
     Injected into the engine's topbar by page.js. The film exists in two languages and
     nothing else on the page says so, so the control has to live in the chrome. It sits
     inside .sw-topbar, which means it fades out with the rest of it at the footer. ---- */
  .q-lang {
    display:flex; gap:2px; padding:4px;
    background:color-mix(in srgb,#fff 55%,transparent);
    backdrop-filter:blur(10px);
    border:1px solid var(--q-line); border-radius:999px;
    font-family:var(--sw-font-display);
  }
  .q-lang a {
    padding:6px 13px; border-radius:999px; text-decoration:none;
    font-size:.82rem; font-weight:500; letter-spacing:.04em;
    color:var(--sw-ink-soft);
  }
  .q-lang a.is-active { background:#1B4FE8; color:#fff; }
  .q-lang a:hover:not(.is-active) { color:var(--sw-ink); }
  /* Fitting the language pair into the topbar.
     Brand + scene nav + switch + CTA, at their minimum spacing, need ~1150px with the
     English labels ("The quiet part", "Get beta access" run widest) and ~1020px with the
     Russian ones. Below that the CTA was pushed off the right edge. The engine itself only
     drops the nav at 860px, so drop it earlier: the progress dots on the right list the
     same scenes, whereas the language switch has no duplicate anywhere above the footer.
     One threshold for both languages, with headroom, so a copy edit cannot silently
     reopen the gap. */
  @media (max-width:1180px) { .sw-nav { display:none; } }
  .sw-nav__item { white-space:nowrap; }

  /* On phones even mark + wordmark + switch + CTA overflow (~430px of content on a 390px
     screen). The CTA is the conversion and the switch must stay reachable without
     scrolling the whole film, so the wordmark gives way and the qd mark carries the
     brand alone. */
  @media (max-width:560px) { .sw-brand__name { display:none; } }

  /* The scroll hint is centred with left:50% + translateX(-50%), which caps its
     shrink-to-fit width at half the viewport. "scroll to fly in" fits in that; the
     Russian line does not, so it wrapped at 195px on a phone and sat left-aligned
     against the centred mouse icon. Size it to its text instead, bounded by the
     screen, and centre the lines if a very narrow screen still forces a wrap. */
  .sw-hint { width:max-content; max-width:calc(100vw - 40px); text-align:center; }