:root{
  --card-bg: rgba(0,0,0,0.56);
  --card-border: rgba(255,255,255,0.06);
  --card-shadow: rgba(0,0,0,0.72);
  --text-color: #ffffff;
  --site-header-height: 72px;
  --site-footer-height: 72px;
}
/* Home page styles: hero image and quote */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
:root{
  --card-bg: rgba(0,0,0,0.56);
  --card-border: rgba(255,255,255,0.06);
  --card-shadow: rgba(0,0,0,0.72);
  --text-color: #ffffff;
  --site-header-height: 72px;
  --site-footer-height: 72px;
}

/* Hide default theme page title on homepage */
.md-content .md-typeset > h1:first-child,
.md-page__title,
.md-title { display:none !important }

.hero-wrap{
  min-height: calc(100vh - var(--site-header-height) - var(--site-footer-height));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:24px 12px 8px 12px;
}

.hero-bg{
  position:relative;z-index:0;border-radius:20px;overflow:hidden;width:100%;height:100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

.hero-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter: brightness(0.96) saturate(1.03);
  transform:scale(1);animation: slow-zoom 24s ease-in-out infinite;
  border-radius:inherit; /* inherit the rounded corners from .hero-bg */
}
@keyframes slow-zoom{ 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* Quote shown below the hero image on the homepage */
.page-quote{
  max-width: 900px;
  margin: 28px auto 64px auto;
  padding: 0 18px;
  color:var(--text-color);
  font-family: 'Dancing Script', 'Patrick Hand', 'Caveat', 'Segoe Script', -apple-system, system-ui, cursive !important;
  font-weight: 400;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  line-height:1.35;
  text-align:center;
  letter-spacing: 0.2px;
}
.page-quote cite{display:block;margin-top:10px;font-size:0.95rem;opacity:0.9}

/* subtle page background */
body{background: linear-gradient(180deg,#0f1113, #16181a) fixed}

@media (max-width:680px){
  .hero-wrap{min-height:45vh;padding:18px 8px}
  .page-quote{margin-top:18px;margin-bottom:40px}
}