/* ============================================================================
   JT MENU MODULE — v1.4.0
   FROZEN. Link this file; don't copy it into a page, don't edit it per page.

   Transcribed from the Figma component `menu` (27:5825), the component sets
   `Nav Link` (2:1466), `Submenu item` (76:2340) and `lang link` (38:2402),
   the `Submenu` frame (85:6347), and the two motion specs `menu — motion`
   and `Submenu — motion`. Every colour, size and timing below is a measured
   or specified value, not an approximation.

   Self-contained: owns its custom properties, its media queries and its
   defaults, and asks nothing of the host page.

   Contents
     1. Tokens
     2. Bar — sticky, constant-height scroll states
     3. Brand
     4. Nav links + the underline "cursor"
     5. Submenu panel, glow bar, rows
     6. Language switcher
     7. Responsive menu and mobile drawer
     8. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- palette (measured) ---------------------------------------------- */
  --jt-menu-brand:        #eb8b2d;   /* emblem, wordmark, hover/active accent */
  --jt-menu-link:         #00d4ff;   /* nav labels, current markers */
  --jt-menu-link-soft:    #7dd3fc;   /* active language */
  --jt-menu-muted:        #66798d;   /* inactive languages, separators */
  --jt-menu-row-label:    #d7dee0;   /* submenu row, resting */
  --jt-menu-row-index:    #4d809c;   /* submenu numerals, resting */

  --jt-menu-surface:      rgba(63, 67, 82, 0.10);   /* bar + panel glass */
  --jt-menu-border:       rgba(75, 97, 107, 0.20);  /* bar underline, panel edge */
  --jt-menu-shadow:       0 4px 30px rgba(0, 0, 0, 0.10);
  --jt-menu-blur:         8px;    /* bar AND panel — the design uses one value */

  /* The orange glow that marks every hover/focus in this module. */
  --jt-menu-glow:         drop-shadow(0 0 10px rgba(235, 139, 45, 0.55));

  /* --- geometry --------------------------------------------------------- */
  --jt-menu-height:       60px;   /* Nav Link and menu component height */
  --jt-menu-gutter:       20px;
  --jt-menu-emblem:       36px;
  --jt-menu-brand-gap:    20px;
  --jt-menu-item-gap:     24px;

  /* Submenu placement. The panel's left edge sits this far LEFT of its parent
     nav item, and the panel hangs this far BELOW the bar. */
  --jt-menu-panel-inset:  46px;
  --jt-menu-panel-offset: 4px;

  /* Positions measured from the updated 60px Nav Link variants. */
  --jt-menu-cursor-rest:  15px;
  --jt-menu-cursor-hover: 0px;

  /* Hover nudges the label down as the rule drops toward the bar edge. */
  --jt-menu-label-shift:  3px;

  /* --- motion (from the two motion specs) -------------------------------- */
  --jt-menu-bar-t:        240ms;  /* hide */
  --jt-menu-bar-in-t:     200ms;  /* re-showing is quicker than hiding */
  --jt-menu-cursor-t:     180ms;
  --jt-menu-panel-t:      300ms;
  --jt-menu-row-t:        200ms;
  --jt-menu-row-stagger:  32ms;
  --jt-menu-ease-out:     cubic-bezier(.2, .8, .2, 1);
  --jt-menu-expo:         cubic-bezier(.16, 1, .3, 1);

  /* Submenu numerals. The design ships them hidden; the component supports
     them. Set `inline-block` to turn them on site-wide. */
  --jt-menu-index-display: none;
}

/* ==========================================================================
   2. BAR
   ========================================================================== */

/* Skip link — a fixed bar is exactly the case where keyboard users need one,
   since the nav precedes the content on every page. Visible only on focus. */
.jt-menu__skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1001;
  padding: 10px 16px;
  transform: translateY(-200%);
  border-radius: 2px;
  background: #061f2b;
  color: var(--jt-menu-link);
  font: 500 13px/1 "Tektur", ui-monospace, monospace;
  letter-spacing: 1.7px;
  text-decoration: none;
}
.jt-menu__skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--jt-menu-link);
  outline-offset: 2px;
}

.jt-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Own stacking context: the panel's blur and the bar's shadow stay
     self-contained and can't interleave with page content. */
  isolation: isolate;
  transition: transform var(--jt-menu-bar-t) ease-in;
}

/* Scrolling down slides the bar away; scrolling up brings it straight back,
   at any depth. JS sets data-hidden. */
.jt-menu[data-hidden="true"] { transform: translateY(-100%); }
.jt-menu[data-hidden="false"] {
  transform: translateY(0);
  transition-duration: var(--jt-menu-bar-in-t);
  transition-timing-function: ease-out;
}

/* The glass and 60px height are constant at every scroll position. */
.jt-menu__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--jt-menu-height);
  padding-inline: var(--jt-menu-gutter);
}

/* Paint the bar glass on a sibling layer instead of on .jt-menu__bar itself.
   A backdrop-filter on an ancestor creates a backdrop root; a nested filtered
   submenu then cannot sample the page behind it and appears transparent in
   Safari and Chromium. Keeping the glass on this pseudo-element lets both the
   bar and every panel use the same surface and blur independently. */
.jt-menu__bar::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: var(--jt-menu-surface);
  border-bottom: 1px solid var(--jt-menu-border);
  box-shadow: var(--jt-menu-shadow);
  backdrop-filter: blur(var(--jt-menu-blur));
  -webkit-backdrop-filter: blur(var(--jt-menu-blur));
}

.jt-menu__brand,
.jt-menu__nav,
.jt-menu__utilities { position: relative; z-index: 2; }

/* ==========================================================================
   3. BRAND
   ========================================================================== */

.jt-menu__brand {
  display: flex;
  align-items: center;
  gap: var(--jt-menu-brand-gap);
  margin-inline-end: auto;
  color: var(--jt-menu-brand);
  text-decoration: none;
}
.jt-menu__brand:not([aria-current="page"]):hover {
  filter: drop-shadow(0 0 5px rgba(235, 139, 45, .5));
}


.jt-menu__emblem {
  display: block;
  width: var(--jt-menu-emblem);
  height: var(--jt-menu-emblem);
  object-fit: contain;
  transition: width var(--jt-menu-bar-t) ease-out, height var(--jt-menu-bar-t) ease-out;
}

.jt-menu__wordmark {
  font: 700 24px/normal "Tektur", ui-monospace, monospace;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.jt-menu__brand:focus-visible {
  outline: 2px solid var(--jt-menu-link);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ==========================================================================
   4. NAV LINKS
   ========================================================================== */

.jt-menu__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.jt-menu__utilities {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 24px;
}

.jt-menu__items {
  display: flex;
  align-items: stretch;
  gap: var(--jt-menu-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jt-menu__item {
  position: relative;   /* anchors the submenu panel */
  display: flex;
}

/* Top-level items are <button>s, not links: a category has no page of its own,
   it only reveals a submenu (see build.js). The selector stays `__link` so the
   whole state model below is unchanged, but the button's UA defaults have to
   be stripped or it renders as a grey chrome control.

   A category with no pages in OUTPUT/ still renders as an <a>; both are
   matched here. */
.jt-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--jt-menu-height);
  padding-inline: 8px;

  /* Button reset. `appearance: none` is the load-bearing line: with the
     default `appearance: auto` the platform still draws the control, and
     Safari and Chrome apply the system button text colour over the author's,
     which rendered these labels grey. Author `color` alone does not win that
     fight — the native appearance has to be switched off first. */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;

  color: var(--jt-menu-link);
  text-decoration: none;
  transition: color var(--jt-menu-cursor-t) ease-out, filter var(--jt-menu-cursor-t) ease-out;
}

.jt-menu__label {
  font: 400 14px/1.28 "Tektur", ui-monospace, monospace;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: translate var(--jt-menu-cursor-t) ease-out;
}

/* The label drops 4px as the rule falls away to the bar edge — in the
   component the text moves y26 → y30 between the default and hover variants,
   so the two are one gesture rather than the rule moving alone. */
.jt-menu__item:hover > .jt-menu__link .jt-menu__label,
.jt-menu__link:focus-visible .jt-menu__label,
.jt-menu__item[data-open="true"] > .jt-menu__link .jt-menu__label {
  translate: 0 var(--jt-menu-label-shift);
}

/* THE CURSOR — one element, three positions.

   Non-current, resting:  transparent at full width
   Current, resting:      cyan, 6px below the label
   Hover / focus:         orange + glow, at the bar's bottom edge

   `bottom` is transitioned, which slides it toward the bar edge on hover. */
.jt-menu__cursor {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: var(--jt-menu-cursor-rest);
  height: 2px;
  background: var(--jt-menu-link);
  transform: scaleX(1);
  transform-origin: left center;
  background-color: rgba(0,0,0,0);
  transition:
    transform var(--jt-menu-cursor-t) ease-out,
    bottom var(--jt-menu-cursor-t) ease-out,
    background-color var(--jt-menu-cursor-t) ease-out;
}

/* THE CURRENT SECTION carries a cyan rule at rest — component set "Nav Link"
   (2:1466), variant `State=default, current=yes`: label #00d4ff, cursor #00d4ff
   at the resting offset. So a visitor reading any page in About sees About
   underlined in the bar.

   The set has no separate "expanded" state, and `current=yes` on hover and on
   focus is orange with the glow, exactly like `current=no` — which is why the
   rule below can stay indifferent to whether the item is current.

   This rule was briefly transparent instead. That was wrong: it left a page
   with no indication of which section it belonged to. */
.jt-menu__link[aria-current="page"] .jt-menu__cursor,
.jt-menu__item[data-section-current="true"] > .jt-menu__link .jt-menu__cursor {
  transform: scaleX(1);
  background-color: var(--jt-menu-link);
}

.jt-menu__item:hover > .jt-menu__link .jt-menu__cursor,
.jt-menu__link:focus-visible .jt-menu__cursor,
.jt-menu__item[data-open="true"] > .jt-menu__link .jt-menu__cursor {
  transform: scaleX(1);
  bottom: var(--jt-menu-cursor-hover);
  background: var(--jt-menu-brand);
  filter: var(--jt-menu-glow);
}

/* The hover/focus variants carry a 2px corner on the link itself. */
.jt-menu__item:hover > .jt-menu__link,
.jt-menu__link:focus-visible,
.jt-menu__item[data-open="true"] > .jt-menu__link { border-radius: 2px; }

.jt-menu__item:hover > .jt-menu__link,
.jt-menu__link:focus-visible,
.jt-menu__item[data-open="true"] > .jt-menu__link {
  color: var(--jt-menu-brand);
  filter: var(--jt-menu-glow);
}

.jt-menu__link:focus-visible {
  outline: 2px solid var(--jt-menu-brand);
  outline-offset: -4px;
  border-radius: 2px;
}

.jt-menu__divider {
  width: 1px;
  height: 40px;
  background: var(--jt-menu-border);
}

/* ==========================================================================
   5. SUBMENU
   ========================================================================== */

.jt-menu__panel {
  position: absolute;
  z-index: 1;

  /* Sits 4px below the bar rather than flush against it. */
  top: calc(100% + var(--jt-menu-panel-offset));

  /* Left edge is 46px LEFT of the parent nav item, not centred under it.
     The parent item therefore starts at x = 46px inside the panel, which is
     also where the glow bar is anchored — see .jt-menu__glow. */
  left: calc(-1 * var(--jt-menu-panel-inset));
  translate: none;

  /* 245 wide with 40px side padding leaves 165 of content — the rows are 163.
     The 40px left padding is also what puts the first row's text roughly under
     the parent label, given the panel starts 46px further left. */
  min-width: 245px;
  padding: 20px 40px;
  border: 1px solid var(--jt-menu-border);
  border-radius: 2px;

  /* Same surface as the bar, deliberately — the two are one material. */
  background: var(--jt-menu-surface);
  box-shadow: var(--jt-menu-shadow);

  /* The panel unfolds from its top edge rather than fading: transform-origin
     top, scaleY .92 → 1, with a clip-path wipe downward so the bottom edge
     stays crisp instead of stretching. */
  transform-origin: top center;
  scale: 1 0.92;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  backdrop-filter: blur(var(--jt-menu-blur));
  -webkit-backdrop-filter: blur(var(--jt-menu-blur));

  /* Closed with `visibility`, NOT `display:none` or the `hidden` attribute.
     The rows stay in the DOM and in the document for crawlers and for anyone
     without JS, while visibility:hidden still keeps them out of the tab
     order — which `opacity: 0` alone would not. */
  visibility: hidden;

  transition:
    scale var(--jt-menu-panel-t) var(--jt-menu-expo),
    clip-path var(--jt-menu-panel-t) var(--jt-menu-expo),
    opacity 120ms linear,
    backdrop-filter var(--jt-menu-panel-t) ease-out,
    visibility 0s var(--jt-menu-panel-t);
}

.jt-menu__panel[data-open="true"] {
  scale: 1 1;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  visibility: visible;
  /* Same 8px as the bar: both components use one glass material. */
  backdrop-filter: blur(var(--jt-menu-blur));
  -webkit-backdrop-filter: blur(var(--jt-menu-blur));
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

/* --- no-JS fallback --------------------------------------------------------
   menu.js sets data-js="true" the moment it runs, which switches these off in
   favour of the intent-delayed, keyboard-aware version it manages. Until then
   (or forever, if JS fails) plain CSS hover and focus-within open the panel,
   so the submenu is fully usable by mouse and keyboard with no script at all.
   The trade-off is no open delay — acceptable as a fallback, not as the
   primary behaviour, which is why JS takes over when present. */
.jt-menu:not([data-js="true"]) .jt-menu__item:hover > .jt-menu__panel,
.jt-menu:not([data-js="true"]) .jt-menu__item:focus-within > .jt-menu__panel {
  scale: 1 1;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  visibility: visible;
  backdrop-filter: blur(var(--jt-menu-blur));
  -webkit-backdrop-filter: blur(var(--jt-menu-blur));
  transition-delay: 0s;
}
.jt-menu:not([data-js="true"]) .jt-menu__item:hover > .jt-menu__panel .jt-menu__sublink,
.jt-menu:not([data-js="true"]) .jt-menu__item:focus-within > .jt-menu__panel .jt-menu__sublink {
  opacity: 1;
  translate: 0 0;
}

/* Closing runs the same sequence at ~0.6x — dismissal should never feel like
   waiting. */
.jt-menu__panel[data-closing="true"] {
  transition-duration: 200ms, 200ms, 100ms, 200ms;
}

/* The "glow" bar: a filament coming up to power. Strikes outward from centre
   before the panel unfolds, and is the trigger the panel answers to.

   Its width is the PARENT NAV ITEM's width, measured at run time by menu.js
   and published as --jt-menu-glow-w — it is not a fixed number, so it stays
   correct as labels change length between languages (Русский labels are
   materially wider than English ones).

   It is anchored to the parent item's left edge, which sits at
   --jt-menu-panel-inset inside the panel because the panel starts 46px
   further left. */
.jt-menu__glow {
  position: absolute;
  top: -1px;                                  /* flush with the panel's top edge */
  left: var(--jt-menu-panel-inset);
  translate: none;
  width: var(--jt-menu-glow-w, 99px);
  height: 1px;
  background: rgba(235, 139, 45, 0.20);
  box-shadow:
    0 0 10px rgba(235, 139, 45, 0.55),
    0 0 13px rgba(233, 138, 46, 1),
    0 0 30px rgba(233, 138, 45, 1);
  transform: scaleX(0);
  opacity: 0;
}
.jt-menu__panel[data-open="true"] .jt-menu__glow {
  animation: jt-menu-strike 260ms var(--jt-menu-ease-out) forwards;
}
@keyframes jt-menu-strike {
  0%   { transform: scaleX(0);    opacity: 0; filter: brightness(1.8); }
  60%  { transform: scaleX(1.06); opacity: 1; }
  100% { transform: scaleX(1);    opacity: 1; filter: brightness(1); }
}

/* One pass of a cyan scanline on open. Once only, never looped — atmosphere,
   not decoration. */
.jt-menu__panel[data-open="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  top: -2px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.12) 50%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  animation: jt-menu-scan 420ms linear 120ms 1;
}
@keyframes jt-menu-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

.jt-menu__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row is an <a>, EXCEPT the row for the page you are already on, which is a
   <span aria-current="page"> — there is nowhere to navigate to. Both are
   matched here so the layout and reveal animation are identical; only the
   interactive states below distinguish them. */
.jt-menu__sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding-inline: 0;
  border-radius: 4px;
  color: var(--jt-menu-row-label);
  text-decoration: none;
  white-space: nowrap;

  /* Rows are in the DOM from the start and hit-testable from the first frame;
     motion only reveals them. */
  opacity: 0;
  translate: -8px 6px;
  transition:
    opacity var(--jt-menu-row-t) ease-out,
    translate var(--jt-menu-row-t) ease-out,
    color 140ms ease-out,
    background-color 140ms ease-out;
}
.jt-menu__panel[data-open="true"] .jt-menu__sublink {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--jt-menu-row-i, 0) * var(--jt-menu-row-stagger));
}
/* Closing: all rows fade together, no stagger. */
.jt-menu__panel[data-closing="true"] .jt-menu__sublink {
  transition-duration: 160ms;
  transition-delay: 0ms;
}

.jt-menu__accent {
  flex: none;
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: var(--jt-menu-link);
  opacity: 0;
  transition: opacity 140ms ease-out, background-color 140ms ease-out, height 140ms ease-out;
}

.jt-menu__index {
  display: var(--jt-menu-index-display);
  min-width: 28px;
  color: var(--jt-menu-row-index);
  font: 400 12px/1.33 "Tektur", ui-monospace, monospace;
  letter-spacing: 1.4px;
  transition: color 140ms ease-out;
}

.jt-menu__sublabel {
  font: 400 12px/1.67 "Tektur", ui-monospace, monospace;
  letter-spacing: 1.4px;
  transition: translate 140ms ease-out;
}

/* Row — current page. The cyan marker draws in and holds a faint pulse
   while the panel is open. */
.jt-menu__sublink[aria-current="page"] { color: var(--jt-menu-link); }
.jt-menu__sublink[aria-current="page"] .jt-menu__accent {
  opacity: 1;
  height: 16px;
  animation: jt-menu-pulse 3s ease-in-out 240ms infinite;
}
.jt-menu__sublink[aria-current="page"] .jt-menu__index { color: var(--jt-menu-link); }
@keyframes jt-menu-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Row — hover/focus. The label turns orange with a glow; the marker stays
   fully transparent for a non-current row and no fill is added.

   EVERY hover and focus rule below excludes [aria-current="page"]. The current
   row IS a link — it navigates, so it can be clicked, tabbed to, opened in a
   new tab, and appears in a screen reader's list of links — but it shows no
   hover or focus treatment whatsoever. It looks identical in all three states.

   That is a deliberate instruction, and it means the component's Hover+current
   and Focus+current variants stay unimplemented, and the current row has no
   visible focus indicator. Keyboard users will pass through an invisible tab
   stop there. Recorded in MODULE.md rather than left to look like an
   oversight. The single selector below is the whole opt-out, so restoring
   either state later is a one-line change. */
a.jt-menu__sublink:not([aria-current="page"]):hover,
a.jt-menu__sublink:not([aria-current="page"]):focus-visible {
  color: var(--jt-menu-brand);
}
a.jt-menu__sublink:not([aria-current="page"]):hover .jt-menu__sublabel,
a.jt-menu__sublink:not([aria-current="page"]):focus-visible .jt-menu__sublabel { filter: var(--jt-menu-glow); }

a.jt-menu__sublink:not([aria-current="page"]):hover .jt-menu__index,
a.jt-menu__sublink:not([aria-current="page"]):focus-visible .jt-menu__index { color: var(--jt-menu-brand); }

/* Focus arrives with no easing — keyboard users get no delay. */
a.jt-menu__sublink:not([aria-current="page"]):focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.6);
  outline-offset: -2px;
  transition-duration: 0ms;
}
/* Anything marked current is a <span>, not a link. `cursor: default` so the
   pointer never promises a click that isn't there — on the submenu row and on
   the brand lockup when you are already on the homepage. */
.jt-menu__sublink[aria-current="page"] { cursor: default; }

/* ==========================================================================
   6. LANGUAGE SWITCHER
   ========================================================================== */

.jt-menu__langs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jt-menu__lang {
  color: var(--jt-menu-muted);
  font: 400 14px/1.28 "Tektur", ui-monospace, monospace;
  letter-spacing: 2.1px;
  text-decoration: none;
  transition: color 140ms ease-out, filter 140ms ease-out;
}

a.jt-menu__lang:hover,
a.jt-menu__lang:focus-visible {
  color: var(--jt-menu-brand);
  filter: drop-shadow(0 0 8px rgba(235, 139, 45, 0.55));
}

.jt-menu__lang--current {
  color: var(--jt-menu-link-soft);
  user-select: none;
}

a.jt-menu__lang:focus-visible { outline: 2px solid var(--jt-menu-brand); outline-offset: 3px; border-radius: 2px; }

.jt-menu__lang--unavailable {
  opacity: 0.45;
  cursor: default;
  user-select: none;
}

.jt-menu__lang-sep {
  color: var(--jt-menu-muted);
  font: 500 11px/1.27 "Tektur", ui-monospace, monospace;
  letter-spacing: 1.7px;
}

/* ==========================================================================
   7. RESPONSIVE MENU
   Breakpoints match the named frames in Figma's `Menu responsive` section.
   ========================================================================== */

.jt-menu__toggle {
  display: none;
  width: 44px;                 /* 44px: the minimum comfortable touch target */
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--jt-menu-link);
}
.jt-menu__burger,
.jt-menu__burger::before,
.jt-menu__burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms var(--jt-menu-ease-out), opacity 120ms linear;
}
.jt-menu__burger { margin-inline: auto; position: relative; }
.jt-menu__burger::before,
.jt-menu__burger::after { content: ""; position: absolute; left: 0; }
.jt-menu__burger::before { top: -7px; }
.jt-menu__burger::after  { top: 7px; }

.jt-menu__toggle[aria-expanded="true"] .jt-menu__burger { background: transparent; }
.jt-menu__toggle[aria-expanded="true"] .jt-menu__burger::before { transform: translateY(7px) rotate(45deg); }
.jt-menu__toggle[aria-expanded="true"] .jt-menu__burger::after  { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1440px) {
  :root { --jt-menu-gutter: 48px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :root { --jt-menu-item-gap: 12px; }
  .jt-menu__wordmark { display: none; }
  .jt-menu__link { padding-inline: 4px; }
  .jt-menu__utilities { gap: 20px; }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  :root { --jt-menu-item-gap: 20px; }
  .jt-menu__wordmark { font-size: 18px; letter-spacing: 3px; }
}

/* Cyrillic labels are materially wider. Keep the designed 1025px desktop
   behavior without clipping the language controls at the narrow edge. */
@media (min-width: 1025px) and (max-width: 1079px) {
  html:lang(ru) { --jt-menu-item-gap: 10px; }
}

html.jt-menu-lock,
body.jt-menu-lock { overflow: hidden; }

@media (max-width: 767px) {
  :root {
    --jt-menu-height: 60px;
    --jt-menu-gutter: 20px;
    --jt-menu-emblem: 36px;
    --jt-menu-brand-gap: 20px;
  }

  .jt-menu__wordmark { font-size: 18px; letter-spacing: 3px; }
  .jt-menu__bar { padding-right: 0; }
  .jt-menu__utilities { gap: 0; z-index: 3; }
  .jt-menu__langs { order: 1; }
  .jt-menu__langs { margin-right: 20px; }
  .jt-menu__divider { order: 2; }
  .jt-menu__toggle { display: block; order: 3; width: 58px; height: 60px; }

  .jt-menu__nav {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    min-height: 100vh;
    height: 100dvh;
    padding: 70px 40px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--jt-menu-surface);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    translate: 0 -8px;
    opacity: 0;
    visibility: hidden;
    transition: translate 200ms var(--jt-menu-ease-out), opacity 160ms linear, visibility 0s 200ms;
  }
  .jt-menu[data-nav-open="true"] .jt-menu__nav {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }

  .jt-menu__items { flex-direction: column; align-items: stretch; gap: 0; }
  .jt-menu__item { flex-direction: column; }
  .jt-menu__link { height: 50px; padding-inline: 0; }
  .jt-menu__cursor { left: 0; right: 0; bottom: 0; }

  /* NO CURRENT MARK ON A COLLAPSED SECTION.

     In the bar, the underline answers "which section am I in?" against four
     other sections all visible at once. In the drawer the sections are stacked
     rows, and a rule under a collapsed one reads as a divider or as a selected
     row rather than as a section marker — it competes with the row it sits
     above instead of labelling the row it belongs to.

     The drawer answers the question a better way: it opens with the current
     section already expanded (see setNavOpen in menu.js), so the current page's
     own row is visible and marked. Expanding a section still colours its rule,
     which is the open-state rule further up and applies to every section. */
  .jt-menu__item[data-section-current="true"]:not([data-open="true"])
    > .jt-menu__link .jt-menu__cursor {
    background-color: rgba(0, 0, 0, 0);
  }

  /* Panels sit inline in the drawer instead of floating. The desktop offsets
     are reset explicitly rather than relying on `position: static` ignoring
     them — the panel keeps its own custom properties, and a later change to
     the positioning scheme shouldn't silently reintroduce a 46px shift here. */
  .jt-menu__panel {
    display: none;
    position: static;
    inset: auto;
    translate: none;
    min-width: 0;
    margin: 0;
    padding: 10px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .jt-menu__panel[data-open="true"] { 
    display: block; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .jt-menu__rows { 
    gap: 0;
    margin-bottom: 18px;
  }
  .jt-menu__sublink { width: 100%; }
  .jt-menu__glow { display: none; }
  .jt-menu__panel::after { display: none; }
}

@media (max-width: 509px) {
  .jt-menu__wordmark { display: none; }
}

/* ==========================================================================
   8. REDUCED MOTION
   Every transform drops to a 120ms opacity fade. The glow strike, the
   scanline and the current-item pulse do not run at all, and the bar stays
   permanently visible rather than sliding away.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .jt-menu,
  .jt-menu__bar,
  .jt-menu__panel,
  .jt-menu__sublink,
  .jt-menu__cursor,
  .jt-menu__emblem,
  .jt-menu__nav {
    transition-duration: 120ms !important;
    transition-timing-function: linear !important;
    transition-property: opacity !important;
  }
  .jt-menu[data-hidden="true"] { transform: none; }
  .jt-menu__panel { scale: 1 1; clip-path: none; translate: none; }
  .jt-menu__sublink { translate: none; }
  .jt-menu__glow,
  .jt-menu__panel[data-open="true"]::after,
  .jt-menu__sublink[aria-current="page"] .jt-menu__accent {
    animation: none !important;
  }
  .jt-menu__glow { opacity: 1; transform: scaleX(1); }
}