/* Animatable custom property for blur */
  @property --overlay-blur-anim {
    syntax: '<length>';
    inherits: false;
    initial-value: 6px;
  }

  :root{
    --menu-thumb-collapsed: 60px;      /* collapsed image height */
    --menu-thumb-expanded: 200px;      /* hover max height */
    --menu-radius-img: 6px;
    --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --menu-duration: 420ms;            /* image expansion speed */
    --menu-duration-blur: 560ms;       /* slightly slower blur fade */
    --menu-outline: rgba(62,128,189,0.6);
    --overlay-base: rgba(0,0,0,0.20);
    --overlay-hover: rgba(0,0,0,0.15);

    /* Title: black stroke + white fill */
    --title-stroke-color: rgba(0,0,0,0.95);
    --title-stroke-width: 1.5px;

    /* Blur amount (idle) */
    --overlay-blur: 6px;
  }

  /* Single link wraps ONLY image+title (subtext is outside) */
  .menu_bg .menu-item.entry .entry-link{
    display:block;
    text-decoration:none;
    color:inherit;
    background:rgba(0, 0, 0, 0.18);
    border:none;
    padding:0;
    box-shadow:none;
  }
  .menu_bg .menu-item.entry .entry-link:hover,
  .menu_bg .menu-item.entry .entry-link:focus-within{ background:rgba(0, 0, 0, 0.18); }
  .menu_bg .menu-item.entry .entry-link:focus-visible{
    outline:2px solid var(--menu-outline);
    outline-offset:2px;
  }

  /* Image wrapper animates height; centered crop */
  .menu_bg .menu-item.entry .entry-image{
    position:relative;
    height:var(--menu-thumb-collapsed);
    overflow:hidden;
    border-radius:var(--menu-radius-img);
    transition: height var(--menu-duration) var(--menu-ease);
    will-change: height;
  }
  .menu_bg .menu-item.entry .entry-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:translateZ(0);
  }

  /* Title overlay ONLY (centered over image) + smoothly fading blur */
  .menu_bg .menu-item.entry .entry-title-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    text-align:center;
    color:#fff; /* white fill */
    background:var(--overlay-base);

    /* Animatable blur variable */
    --overlay-blur-anim: var(--overlay-blur);
    -webkit-backdrop-filter: blur(var(--overlay-blur-anim));
    backdrop-filter: blur(var(--overlay-blur-anim));

    transition:
      background var(--menu-duration) var(--menu-ease),
      -webkit-backdrop-filter var(--menu-duration-blur) var(--menu-ease),
      backdrop-filter var(--menu-duration-blur) var(--menu-ease),
      --overlay-blur-anim var(--menu-duration-blur) var(--menu-ease),
      opacity var(--menu-duration) var(--menu-ease);
    will-change: backdrop-filter, opacity;
  }

  /* Fallback when backdrop-filter unsupported */
  @supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
    .menu_bg .menu-item.entry .entry-title-overlay{ background: rgba(0,0,0,0.5); }
  }

  /* High-contrast title outline: BLACK stroke + WHITE fill */
  .menu_bg .menu-item.entry .entry-title-overlay h3{
    margin:0;
    line-height:1.2;
    color:#fff; /* ensure white fill explicitly */
    /* Black halo fallback */
    text-shadow:
      1px 0   0 var(--title-stroke-color),
     -1px 0   0 var(--title-stroke-color),
      0   1px 0 var(--title-stroke-color),
      0  -1px 0 var(--title-stroke-color),
      1px 1px 0 var(--title-stroke-color),
     -1px -1px 0 var(--title-stroke-color),
      1px -1px 0 var(--title-stroke-color),
     -1px 1px 0 var(--title-stroke-color),
      0   0   6px rgba(0,0,0,.35);
    font-weight:700;
  }
  @supports (-webkit-text-stroke: 1px black){
    .menu_bg .menu-item.entry .entry-title-overlay h3{
      -webkit-text-stroke: var(--title-stroke-width) var(--title-stroke-color);
      paint-order: stroke fill;
      text-shadow: 0 1px 1px rgba(0,0,0,.15); /* subtle inner depth */
    }
  }

  /* Hover: expand image; darken overlay; fade blur to 0 with slower timing */
  .menu_bg .menu-item.entry .entry-link:hover .entry-image,
  .menu_bg .menu-item.entry .entry-link:focus-within .entry-image{
    height:var(--menu-thumb-expanded);
  }
  .menu_bg .menu-item.entry .entry-link:hover .entry-title-overlay,
  .menu_bg .menu-item.entry .entry-link:focus-within .entry-title-overlay{
    background:var(--overlay-hover);
    --overlay-blur-anim: 0px;  /* tweened by the longer blur duration */
  }

  /* Subtext block (outside the link), tight spacing */
  .menu_bg .menu-item.entry .entry-caption p{ margin:0; font-size:12px; }
  .menu_bg .menu-item.entry{ margin-bottom:0; }

  @media (prefers-reduced-motion: reduce){
    .menu_bg .menu-item.entry .entry-image,
    .menu_bg .menu-item.entry .entry-title-overlay{ transition:none; }
  }