:root{
  --site-nav-height: 64px;
}

.site-header{
    border-bottom: 0;
    background-color: var(--page);
    position: relative;
    z-index: 1000000;
  }
  
  .header-inner{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
  }
  
  .header-brand{
    font-weight: 700;
    text-decoration: none;
  }
  
  .header-nav{
    margin-left: auto;
  }
  
  .od1-menu,
  .od1-footer-menu{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-3);
  }
  
  .od1-menu a,
  .od1-footer-menu a{
    text-decoration: none;
    opacity: .85;
  }
  
  .od1-menu a:hover,
  .od1-footer-menu a:hover{
    opacity: 1;
  }
  
  .site-footer{
    border-top: 1px solid var(--border);
    margin-top: var(--space-7);
  }
  
  .footer-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  
  .post-card{
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border);
  }
  
  .post-card__title{
    margin: 0 0 var(--space-1);
  }
  
  .post-card__meta{
    color: var(--muted);
    font-size: 0.95rem;
  }

  .card, .panel, .od1-album-card, .od1-modal-panel{
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }

  .card:hover{
    background: var(--surface-2);
    border-color: var(--border-2);
  }

  :focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
  }
  
  .od1-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 300px;
  padding: 12px 18px;
  cursor: pointer;

  border-radius: 999px;
  border: 1px solid var(--border);

  background: var(--theme-primary-color);
  color: var(--theme-secondary-color);

  font-size: var(--text-sm, 14px);
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;

  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.od1-btn:hover{
  color: var(--theme-primary-color);
  border: 2px solid var(--theme-secondary-color) !important;
}

/* Hover */
@media (hover:hover){
  .od1-btn:hover{
    transform: translateY(var(--lift-hover, -2px));
    background: var(--surface-hover);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
  }
}

/* Active */
.od1-btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Focus */
.od1-btn:focus-visible{
  outline: none;
  box-shadow:
    var(--focus-ring),
    var(--shadow-md);
}