html {
  scroll-behavior:smooth;
}

.article-menu {
  border-radius: 16px;
  background: linear-gradient(93deg, #D4E1FD 4.29%, #ECFFEF 90.12%);
  padding: 34px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  max-width: 100%;
  will-change: transform;
}

.article-menu__heading {
  margin: 0;
  margin-bottom:8px;
}

.article-menu__summary {
  display: none;
}

.article-menu__chk {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.article-menu ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.article-menu li {
  display: flex; 
  align-items: center;
  gap: 8px;
  margin:0;
  margin-bottom:4px!important
}

.article-menu li:last-child { 
  margin-bottom: 0;
}

.article-menu .menu-number { 
  color: #000;
  font-family: var(--font-family-title, Inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--font-line-height-h4);
  letter-spacing: -0.672px;}

.article-menu a { 
  color: #000; 
  font-family: var(--font-family-title);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--font-line-height-h4);
  letter-spacing: -0.672px; 
  color: #000;
  font-family: var(--font-family-title, Inter);
  font-size: 16.81px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--font-line-height-h4, 40px);
  letter-spacing: -0.672px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.article-menu a:focus, .article-menu a:focus-visible { 
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (min-width:1249px){
  .article-menu {
    width:400px;
  }

  .article-menu-col{
    position: relative;
    flex: 0 0 400px;     
    align-self: flex-start;
  }

  .article-menu-col.fixed{             
    height: var(--menu-height, auto);
  }

  .article-menu.fixed{              
    position: fixed;
    top: 96px;
    left: var(--menu-left, 0px);
    width: 400px;
    z-index: 1;
  }
}

@media (max-width:1248px){
  .article-menu { border-radius: 12px; padding: 16px; }
  .article-menu__heading { display: none; }
  .article-menu__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 500;
    font-family: var(--font-family-title);
    font-size: var(--font-size-h5, 25.924px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-line-height-h5, 32px);
    letter-spacing: -0.518px;
  }

  .article-menu__summary::after {
    content: "▾"; 
    font-size: 14px; 
    line-height: 1; 
  }

  .article-menu ul { 
    display: none;
    margin-top: 10px; 
  }

  .article-menu__chk:checked ~ .article-menu__summary::after {
    content: "▴"; 

  }

  .article-menu__chk:checked ~ ul {
    display: block;
  }
}

@media print{
  .has-article-menu .article-menu {
    position: static;
    float: none;
    width: auto;
    margin: 0 0 12px 0;
    box-shadow: none;
    background: #fff;
  }

  .article-menu__heading { 
    display: block;
  }

  .article-menu__summary { 
    display: none; 
  }

  @media (min-width:1249px){
    .article-menu-col{ 
      position:relative; 
      flex:0 0 400px; 
      align-self:flex-start; 
    }

    .article-menu.smooth-follow{
      will-change: 
        transform;
    }
  }