/* index: dark top, hero video, link columns */

/* The header is a strip of geese (images/site/bg-index.png, fades to transparent at the bottom); below it the hero sits on a #0f0f0f band
   with a soft spotlight. The hero is the cut-corner PNG (transparent corner), so whatever is behind it shows through. */
body.index #topheader{background:#0f0f0f url("../images/site/bg-index.png") repeat-x center top / 1024px 70px}
/* the nav sits on its own dark plate, because the geese are loud */
body.index .navbar{display:inline-flex; width:auto; margin:0; padding:4px 14px 6px 37px; border-radius:0 6px 6px 0; background:rgba(15,15,15,.9)}
body.index .navbar-item, body.index .navbar-item:visited{color:#7fcfff; border-bottom-color:rgba(127,207,255,.33)}
body.index .navbar-item:hover{color:#b6e4ff; border-bottom-color:rgba(255,143,0,.27)}
body.index .navbar-item.active{border-color:#5C6A6B; background:transparent}
body.index .navbar-item.active a{color:#fff}
.hero-band{background:#0f0f0f; padding:18px 0 12px}
.hero{position:relative; max-width:832px; margin:0 auto; padding:0 16px}
/* the spotlight lives inside the hero box, so the band's top edge stays exactly the header's #0f0f0f */
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 55%, rgba(127,207,255,.13), rgba(127,207,255,0) 70%); pointer-events:none}
.hero > *{position:relative}
.hero-tagline{margin:0 0 14px; text-align:center; color:#c9c9c9; font-size:17px; line-height:1.4; text-wrap:balance}
.hero-tagline strong{color:#fff}
.hero .vthumb{filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.hero .more{text-align:right; margin-top:6px}
.hero .more a{color:#7fcfff; border-bottom-color:rgba(127,207,255,.33)}
.hero .more a:hover{color:#b6e4ff; border-bottom-color:rgba(255,143,0,.27)}

/* link columns under a soft gradient */
.links-wrap{margin-top:50px; background:linear-gradient(#f0ebeb, #fff) top / 100% 98px no-repeat; padding-top:16px}
#links{display:grid; grid-template-columns:1.2fr 1.1fr 2.2fr 1fr; gap:24px 3%; align-items:start; padding-bottom:20px}
#links .col{min-width:0}
#links .col ul{margin:10px 0 0; padding:0; list-style:none; line-height:1.8em}
/* one entry = one line, long titles fade out at the right edge (as on the old site) */
#links .col li{margin:0; position:relative; white-space:nowrap; overflow:hidden; height:1.8em}
#links .col li::after{content:""; position:absolute; top:0; right:0; bottom:0; width:3em; background:linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events:none}
.me .tagline{font-weight:bold; margin-top:8px}
.socials a.img{margin-right:6px; vertical-align:middle; line-height:0}
.socials .ico{width:16px; height:16px; vertical-align:middle; position:relative; top:-1px}

@media (max-width:760px){
  #links{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body.index .navbar{padding:4px 10px 5px 16px}
  .hero{padding:0}
  .hero-tagline{padding:6px 16px 0; font-size:16px}
  .hero-band{padding:0 0 8px}
  .hero .more{padding-right:16px}
  #links{grid-template-columns:1fr; gap:22px}
}