/* Compact controls keep one quiet, opaque field throughout every chapter. */
.navbar[data-compact-nav] {
  top: 0;
  transform: none !important;
  background: #D6D4ED !important;
  color: #0A1628;
  mix-blend-mode: normal !important;
  --immersive-link-ink: #0A1628;
}

.navbar[data-compact-nav] :is(.nav-link, .footer-contact-link, .footer-email,
  .home-nav-monogram, .home-nav-label, .menu-button, .w-icon-nav-menu) {
  color: #0A1628 !important;
}

.navbar[data-compact-nav] .nav-logo-wrap img { filter: none !important; }
.navbar[data-compact-nav] .menu-button { background: transparent !important; }
.navbar[data-compact-nav] :is(.home-nav-wordmark, .home-nav-progress) { display: none !important; }
body:has(.navbar[data-compact-nav]) .immersive-nav-landing { display: none; }

/* The work index and cases share one native, in-flow dark bar. Its equal
   outside columns center the wordmark without placing controls over one another.
   The actual header height also clears native anchor/focus scrolling. */
html:has(body:is(.works-index, .immersive-case)) { scroll-padding-top: calc(var(--work-nav-height, 64px) + 16px); }
body:is(.works-index, .immersive-case) .navbar.w-nav {
  position: sticky; inset: 0 0 auto; z-index: 95; height: auto;
  transform: none !important; mix-blend-mode: normal !important;
  background: #0A1628 !important; color: #D6D4ED; border: 0;
  pointer-events: auto; --immersive-link-ink: #D6D4ED;
}
body:is(.works-index, .immersive-case) .navbar .container { width: 100%; max-width: none; padding-inline: 22px !important; }
body:is(.works-index, .immersive-case) .navbar .nav-logo-wrap { display: inline-flex; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0; align-items: center; }
body:is(.works-index, .immersive-case) .navbar .nav-logo-wrap img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(655%) hue-rotate(196deg) brightness(98%) contrast(88%) !important; }
body:is(.works-index, .immersive-case) .navbar .home-nav-progress[hidden] { display: none; }
.work-nav-start, .work-nav-end { display: flex; min-width: 0; align-items: center; }
.work-nav-end { justify-content: flex-end; }
@media (min-width: 992px) {
  body:is(.works-index, .immersive-case) .navbar .nav-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: 64px; gap: 12px clamp(16px, 2vw, 28px); padding-block: 6px;
  }
  .work-nav-start { gap: clamp(12px, 2vw, 28px); }
  .work-nav-end { gap: clamp(12px, 1.5vw, 24px); }
  body:is(.works-index, .immersive-case) .navbar .nav-breadcrumb { position: static; width: auto; min-width: 0; max-width: 100%; margin: 0; }
  body:is(.works-index, .immersive-case) .navbar .nav-breadcrumb ol { flex-wrap: wrap; gap: 4px 8px; }
  body:is(.works-index, .immersive-case) .navbar .nav-breadcrumb :is(ol, li, a) { color: #D6D4ED; }
  body:is(.works-index, .immersive-case) .navbar .nav-breadcrumb [aria-current="page"] { max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  body:is(.works-index, .immersive-case) .navbar .home-nav-wordmark {
    position: static; inset: auto; width: auto; max-width: 100%; height: auto; min-height: 44px;
    margin: 0; justify-self: center; transform: none; color: #D6D4ED;
    font-size: clamp(17px, 1.5vw, 20px); text-align: center; overflow-wrap: anywhere;
  }
  body:is(.works-index, .immersive-case) .navbar .home-nav-progress {
    position: static; flex: 0 0 auto; height: auto; color: #D6D4ED;
    font-size: 12px; line-height: 1.4;
  }
  body:is(.works-index, .immersive-case) .navbar .nav-menu { margin: 0; min-width: 0; }
  body:is(.works-index, .immersive-case) .navbar .nav-menu-area { flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(12px, 1.5vw, 24px); }
  body:is(.works-index, .immersive-case) .navbar .nav-link {
    min-width: 44px; min-height: 44px; max-width: 100%; margin: 0; padding: 10px 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #D6D4ED; background: transparent; border-radius: 0;
    font: 400 clamp(12px, 1.05vw, 14px)/1.4 Inter, sans-serif;
    text-transform: uppercase; white-space: normal; overflow-wrap: anywhere;
  }
  body:is(.works-index, .immersive-case) .navbar .nav-link:is(:hover, :focus-visible, [aria-current="page"]) { color: #D6D4ED; background: transparent; text-decoration: underline; text-underline-offset: 6px; }
  body:is(.works-index, .immersive-case) .navbar .nav-link[aria-current="page"] { text-decoration-color: #BDB414; }
}

/* Home keeps the opening chapter's quiet bar for the whole document. All
   destinations stay in normal flow, including without JavaScript, so adding
   a link cannot reuse an absolute slot or collide with a central wordmark. */
@media (min-width: 992px) {
  body.home .navbar.w-nav,
  body.home .navbar.w-nav:is([data-keyboard="true"]:focus-within, :has(.w--open), [data-reading-dock]) {
    position: fixed; inset: 0 0 auto; transform: none; mix-blend-mode: normal;
    background: #D6D4ED; color: #0A1628; pointer-events: auto;
    --immersive-link-ink: #0A1628;
  }
  body.home .navbar.w-nav .nav-wrap { gap: 28px; }
  body.home .navbar.w-nav :is(.home-nav-wordmark, .home-nav-progress) { display: none; }
  body.home .navbar.w-nav :is(.nav-link, .footer-contact-link, .footer-email, .home-nav-monogram, .home-nav-label) { color: #0A1628; }
  body.home .navbar.w-nav :is(.nav-menu-area > .nav-link, .nav-cta > .footer-contact-link) { position: static; }
  body.home .navbar.w-nav .nav-menu { min-width: 0; }
  body.home .navbar.w-nav :is(.nav-menu-area, .nav-cta) { gap: 8px 28px; flex-wrap: wrap; justify-content: flex-end; }
  body.home .navbar.w-nav .nav-cta { flex-shrink: 1; }
  body.home .navbar.w-nav .nav-link { max-width: 100%; white-space: normal; }
}

/* One compact menu on every route (owner request, 2026-09-15): the About page's
   panel is the pattern. The disclosure drops under the bar at full width, on
   the page's own field (lilac here; About keeps its navy in story.css), with
   left-aligned 17px rows and the current page underlined in olive. */
@media (max-width: 991px) {
  /* The bar itself is the panel's frame, so the panel spans the whole width on
     every route, including the home mast whose wrap is positioned. */
  html body .navbar .nav-wrap, html body .navbar .nav-wrap.dark { position: static !important; }
  html body .navbar .nav-menu.w-nav-menu {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-width: none; margin: 0;
    padding: 20px 20px 28px; border: 0; border-bottom: 1px solid rgb(10 22 40 / 25%);
    border-radius: 0; background: #D6D4ED; box-shadow: none; color: #0A1628;
  }
  html body .navbar .nav-menu :is(.nav-menu-area, .nav-cta) { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin: 0; padding: 0; background: none; }
  html body .navbar .nav-menu :is(.nav-link, .nav-link.white, .footer-contact-link, .footer-email) {
    display: flex; justify-content: flex-start; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 12px 0;
    border: 0; border-radius: 0; background: transparent; color: #0A1628; text-align: left; text-decoration: none;
    font: 400 17px/1.4 Inter, sans-serif; letter-spacing: 0; text-transform: none;
  }
  html body .navbar .nav-menu :is(.home-nav-label, .editorial-linkedin-label) { color: inherit; font: inherit; text-transform: none; letter-spacing: 0; }
  html body .navbar .nav-menu :is(.nav-link, .footer-contact-link, .footer-email):is(:hover, :focus-visible) { background: transparent; text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px; }
  html body .navbar .nav-menu :is(.nav-link[aria-current="page"], .nav-link.w--current) { background: transparent; color: #0A1628; text-decoration: underline; text-decoration-color: #BDB414; text-underline-offset: 9px; text-decoration-thickness: 2px; }
  html body .navbar .menu-button { border: 0; border-radius: 0; background: transparent; color: #0A1628; }
  html body .navbar .menu-button .w-icon-nav-menu, html body .navbar .menu-button.w--open .w-icon-nav-menu { color: #0A1628; }
  body:is(.works-index, .immersive-case) .navbar .nav-wrap { min-height: 56px; }
  body:is(.works-index, .immersive-case) .work-nav-end { display: contents; }
  body:is(.works-index, .immersive-case) .navbar :is(.home-nav-wordmark, .home-nav-progress, .nav-breadcrumb) { display: none; }
  body:is(.works-index, .immersive-case) .navbar :is(.menu-button, .menu-button .w-icon-nav-menu, .menu-button.w--open .w-icon-nav-menu) { color: #D6D4ED !important; }
}

/* The open disclosure drops from the bar (2026-10-07): its clip opens downward
   on a critically damped spring (omega 28 rad/s, zeta 1, sampled into linear(),
   about .23 s). Rows never slide or fade and nothing is disabled: each row is a
   live target as soon as the clip has passed it (all within .26 s). The close
   glyph turns a quarter into place (omega 26, zeta .7). Closing is instant,
   navigation.js stays animation-free, and reduced motion gets none. */
@media (max-width: 991px) {
  html body .navbar .nav-menu.w-nav-menu[data-nav-menu-open] {
    animation: compact-menu-drop 260ms cubic-bezier(.22, .8, .3, 1);
    animation: compact-menu-drop 260ms linear(0, 0.057, 0.172, 0.305, 0.434, 0.549, 0.65, 0.73, 0.794, 0.844, 0.884, 0.915, 0.938, 0.955, 0.968, 0.978, 0.985, 0.991, 0.995, 0.998, 1);
  }
  html body .navbar .menu-button[aria-expanded="true"] .w-icon-nav-menu::before {
    animation: compact-menu-turn 300ms cubic-bezier(.3, 1.3, .5, 1);
    animation: compact-menu-turn 300ms linear(0, 0.047, 0.157, 0.298, 0.447, 0.588, 0.712, 0.815, 0.895, 0.955, 0.997, 1.024, 1.039, 1.045, 1.045, 1.041, 1.036, 1.029, 1.022, 1.016, 1.011, 1.007, 1.004, 1.002, 1);
  }
}
@keyframes compact-menu-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes compact-menu-turn { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  html body .navbar .nav-menu.w-nav-menu[data-nav-menu-open],
  html body .navbar .menu-button[aria-expanded="true"] .w-icon-nav-menu::before { animation: none; }
}
html.no-motion body .navbar .nav-menu.w-nav-menu[data-nav-menu-open],
html.no-motion body .navbar .menu-button[aria-expanded="true"] .w-icon-nav-menu::before { animation: none; }

/* Language link (owner request, 2026-10-06; NN/g audit): one link that names
   the other language in that language (Magyar / English), at the end of the
   menu, leading to the equivalent page (USWDS two-language pattern, GOV.UK
   language navigation). Its visible text is its accessible name (WCAG 2.5.3). */
.navbar .nav-link.lang-switch { white-space: nowrap; }

/* The current page is marked on every bar at every width (NN/g menu checklist). */
.navbar .nav-menu .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-color: #BDB414; text-underline-offset: 9px; text-decoration-thickness: 2px; }

/* An open compact menu shows a close glyph, matching its "Close navigation" name. */
.navbar .menu-button[aria-expanded="true"] .w-icon-nav-menu::before { content: "\00D7"; font-family: Inter, sans-serif; font-size: 30px; font-weight: 300; line-height: 1; }

/* The work and case bars give the menu its whole outside column. Words never
   break inside a destination; on narrow desktops the row wraps whole items. */
@media (min-width: 992px) {
  body:is(.works-index, .immersive-case) .navbar .nav-menu { flex: 0 1 auto; max-width: none; }
  body:is(.works-index, .immersive-case) .navbar .nav-menu-area { gap: 4px clamp(12px, 1.1vw, 18px); }
  body:is(.works-index, .immersive-case) .navbar .nav-menu-area > .nav-link { white-space: nowrap; overflow-wrap: normal; }
}
/* Narrow desktops: the centred wordmark repeats the logo's home link and yields
   before any destination does (design.md header rule). */
@media (min-width: 992px) and (max-width: 1199px) {
  body:is(.works-index, .immersive-case) .navbar .home-nav-wordmark { display: none; }
  body:is(.works-index, .immersive-case) .navbar .nav-wrap { grid-template-columns: auto minmax(0, 1fr); }
}
/* Below 1440px the decorative reading counter yields its room to the menu. */
@media (min-width: 992px) and (max-width: 1439px) {
  body:is(.works-index, .immersive-case) .navbar .home-nav-progress { display: none; }
}
/* Hungarian labels are longer; the counter yields up to 1600px there. */
@media (min-width: 1440px) and (max-width: 1599px) {
  html[lang="hu"] body.works-index .navbar .home-nav-progress { display: none; }
}

/* Privacy pages join the site's quiet lilac bar instead of the inherited white
   Webflow chrome: same type, 44px targets, the current page marked in olive. */
@media (min-width: 992px) {
  body.utility-page .navbar.w-nav { background: #D6D4ED; color: #0A1628; border-bottom: 1px solid rgb(10 22 40 / 12%); }
  body.utility-page .navbar .nav-menu-area { display: flex; align-items: center; gap: 4px 28px; }
  body.utility-page .navbar .nav-link {
    display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 0;
    color: #0A1628; background: transparent; border-radius: 0;
    font: 400 14px/1.4 Inter, sans-serif; letter-spacing: 0; text-transform: uppercase;
  }
  body.utility-page .navbar .nav-link:is(:hover, :focus-visible) { color: #0A1628; background: transparent; text-decoration: underline; text-underline-offset: 6px; }
}