/* The Hero menu becomes a slim rail without moving the page underneath. */
.site-header .desktop-nav { display: none; }
.site-header .menu-toggle { display: flex; }

@media (min-width: 1100px) {
  .page-index .cinema-copy {
    left: auto; right: calc(var(--gutter) + 24px); width: max-content;
    max-width: calc(100% - var(--hero-menu-width, 0px) - 2 * var(--gutter) - 24px);
    display: block; text-align: right;
  }
}

@media (min-width: 1100px) and (min-height: 480px) {
  :root { --rail-width: 104px; --hero-menu-width: 212px; --gutter: clamp(32px, 4vw, 72px); }
  body { padding-left: var(--rail-width); }
  body:not(.page-index) main { padding-top: 0; }
  .site-header, .site-header.is-compact {
    inset: 0 auto 0 0; width: var(--rail-width); height: 100dvh;
    padding: 32px 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    color: var(--ink); background: #ffffffed; mix-blend-mode: normal;
    border-right: 1px solid #1316190d;
  }
  .site-header .brand-logo, .site-header .brand-symbol {
    width: 80px; height: 60px;
  }
  .site-header .brand-logo {
    transform-origin: left top; transition: transform .42s cubic-bezier(.22,1,.36,1);
  }
  .site-header .menu-toggle, .site-header.is-compact .menu-toggle {
    display: flex; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 52px; height: 52px;
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .28s ease, transform .42s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .site-header .menu-toggle span { width: 32px; height: 2px; }
  /* Keep the fading background outside the blended logo/menu layer. */
  .page-index::before {
    content: ''; position: fixed; inset: 0 auto 0 0; width: var(--rail-width);
    background: #ffffffed; border-right: 1px solid #1316190d;
    opacity: 0; transition: opacity .42s ease; pointer-events: none; z-index: 39;
  }
  .page-index.is-rail-compact::before { opacity: 1; }
  .page-index .site-header, .page-index .site-header.is-compact {
    background: transparent; color: #fff; border-color: transparent;
  }
  .page-index .site-header.is-compact .menu-toggle {
    transition: opacity .28s ease .18s, transform .42s cubic-bezier(.22,1,.36,1) .18s, visibility 0s;
  }
  .page-index .site-header:not(.is-compact) {
    background: transparent; color: #fff; border-color: transparent;
  }
  .page-index .site-header:not(.is-compact) .brand-logo {
    transform: translateX(29px) scale(1.475);
  }
  .page-index .site-header .desktop-nav {
    position: absolute; inset: 126px auto 66px 24px;
    width: calc(var(--hero-menu-width) - 48px);
    display: grid; grid-auto-rows: minmax(44px, 1fr);
    align-items: stretch; gap: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s;
  }
  .page-index .site-header:not(.is-compact) .desktop-nav {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0); text-shadow: 0 1px 5px #000b;
    transition: opacity .32s ease .08s, transform .42s cubic-bezier(.22,1,.36,1) .08s, visibility 0s;
  }
  .page-index .site-header .desktop-nav a,
  .page-index .site-header .desktop-nav a:last-child {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; min-height: 44px; padding: 3px 0;
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent; color: inherit; white-space: normal;
    letter-spacing: .02em;
  }
  .page-index .site-header .desktop-nav a span {
    font-size: 22px; line-height: 1.05; font-weight: 800;
  }
  .page-index .site-header .desktop-nav a .menu-label-long {
    font-size: 18px;
  }
  .page-index .site-header .desktop-nav a small {
    margin-top: 4px; font-size: 11px; line-height: 1.4;
    font-weight: 500; letter-spacing: 0;
  }
  .page-index .site-header .desktop-nav a[aria-current] span {
    text-decoration: underline; text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .page-index .site-header:not(.is-compact) .menu-toggle {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -50%) scale(.85);
    transition: opacity .18s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s;
  }
  .page-index .site-header:not(.is-at-top) {
    mix-blend-mode: difference;
  }
  .page-index .cinema-hero {
    margin-left: calc(-1 * var(--rail-width));
    width: calc(100% + var(--rail-width));
  }
  .page-index .mono-intro.diagonal::before { left: calc(-1 * var(--rail-width)); }
  .program-editorial.diagonal::before, .online-program.diagonal::before {
    width: calc(100vw - var(--rail-width));
  }
  .nojs-nav { padding-top: 28px; }
  @media (hover: hover) and (pointer: fine) {
    .page-index .site-header .desktop-nav a:hover { color: inherit; text-decoration: none; }
    .page-index .site-header .desktop-nav a:hover span {
      text-decoration: underline; text-underline-offset: 5px;
      text-decoration-thickness: 1px;
    }
  }
}
@media (min-width: 1100px) and (min-height: 480px) and (max-height: 650px) {
  .site-header, .site-header.is-compact { padding-top: 16px; }
  .page-index .site-header:not(.is-compact) .brand-logo { transform: translateX(45px); }
  .page-index .site-header .desktop-nav { top: 84px; bottom: 30px; }
  .page-index .site-header .desktop-nav a,
  .page-index .site-header .desktop-nav a:last-child { padding-block: 2px; }
  .page-index .site-header .desktop-nav a span { font-size: 20px; }
  .page-index .site-header .desktop-nav a .menu-label-long { font-size: 16px; }
  .page-index .site-header .desktop-nav a small { margin-top: 2px; font-size: 10px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .page-index::before,
  .page-index .site-header,
  .site-header .brand-logo,
  .page-index .site-header .desktop-nav,
  .page-index .site-header:not(.is-compact) .desktop-nav,
  .page-index .site-header:not(.is-compact) .menu-toggle,
  .page-index .site-header.is-compact .menu-toggle,
  .site-header .menu-toggle,
  .site-header.is-compact .menu-toggle { transition: none; }
}