/* index: geese strip, hero video in a balloon, link columns */

/* The header is a strip of geese (images/site/bg-index.png, fades to transparent at the bottom). Below it the page is white:
   the tagline in a speech balloon, then the hero video (a cut-corner PNG, so the page shows through the corner). */
body.index #topheader{background:#fff url("../images/site/bg-index.png?v=8021f6d1") repeat-x center top / 1024px 70px}
/* the nav sits on its own white plate, because the geese are loud */
body.index .navbar{display:inline-flex; width:auto; margin:0; padding:8px 14px 5px calc(var(--gutter) + var(--safe-l)); border-radius:0 6px 6px 0; background:rgba(255,255,255,.92)}
/* hero: the tagline in a speech balloon that points down at the host in the video thumbnail, on the plain white page */
.hero-band{padding:22px 0 12px}
.hero{position:relative; max-width:832px; margin:0 auto; padding:0 calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l))}
.hero-tagline{position:relative; display:flex; align-items:center; gap:16px; max-width:640px; margin:0 auto 22px; padding:10px 20px 10px 14px; font-weight:normal; text-align:left; color:#000; font-size:17px; line-height:1.4; text-wrap:balance;
  background:#f7fbfc; border:1px solid #ADCBCE; border-radius:16px; box-shadow:0 2px 12px rgba(6,44,81,.07)}
/* the balloon's tail: a rotated square with two borders, sitting on the bottom edge */
.hero-tagline::after{content:""; position:absolute; left:50%; bottom:-9px; width:16px; height:16px; margin-left:-8px; background:#f7fbfc; border-right:1px solid #ADCBCE; border-bottom:1px solid #ADCBCE; transform:rotate(45deg)}
.hero-tagline .goose{width:64px; height:64px; flex:none}
.hero-tagline strong{color:#062c51}
.hero .vthumb{filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.hero .more{text-align:right; margin-top:8px}

/* 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:8px 10px 5px calc(var(--gutter) + var(--safe-l))}
  .hero{padding:0 var(--safe-r) 0 var(--safe-l)}
  .hero-tagline{margin:0 16px 20px; padding:8px 12px 8px 10px; gap:10px; font-size:15px; border-radius:12px}
  .hero-tagline .goose{width:48px; height:48px}
  .hero-band{padding:14px 0 8px}
  .hero .more{padding-right:16px}
  #links{grid-template-columns:1fr; gap:22px}
}