/* A real vector arrow cannot turn into a coloured emoji on iOS. */
.channel-arrow svg{display:block;width:15px;height:15px;overflow:visible}
/* The supplied seal becomes a generous, quiet layer behind the masthead. */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.hero-copy{--seal-opacity:.11}
.hero-copy .brand-seal{position:absolute;right:-1.8vw;top:-20%;width:clamp(430px,52vw,740px);height:auto;opacity:var(--seal-opacity);z-index:0;transform:rotate(-8deg)}
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.welcome{position:relative;z-index:1}
.channel-index-panel{position:relative;z-index:1}
@media(max-width:760px){
 .hero{padding-top:54px;gap:28px}
 .hero-copy{display:block;--seal-opacity:.12}
 .hero-copy .eyebrow{margin:0 0 26px}
 .hero h1{margin-top:0}
 .hero .manifesto.welcome.qiuyu-reveal{margin-top:24px}
 .hero-copy .brand-seal{position:absolute;right:-66px;top:-42px;width:clamp(340px,108vw,460px);height:auto;justify-self:auto}
 .channel-tile{isolation:isolate;overflow:hidden;border:1px solid rgba(0,0,0,.3);background:linear-gradient(135deg,rgba(255,255,255,.91),rgba(255,255,255,.63));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 7px rgba(0,0,0,.035);-webkit-backdrop-filter:blur(12px) saturate(105%);backdrop-filter:blur(12px) saturate(105%);transform:translateZ(0);transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s ease,border-color .3s ease}
 .channel-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.9) 47%,transparent 73%);transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
 .channel-tile img,.channel-tile .channel-name,.channel-tile .channel-arrow{position:relative;z-index:1}
 .channel-tile .channel-arrow{top:auto;right:auto;width:14px;height:14px}
 .channel-tile .channel-arrow svg{width:14px;height:14px}
 .channel-tile:hover,.channel-tile:focus-visible,.channel-tile.touch-lift{color:var(--ink);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.7));border-color:rgba(0,0,0,.42);box-shadow:inset 0 1px 0 #fff,0 5px 13px rgba(0,0,0,.065);transform:translateY(-2px) scale(1.015)}
 .channel-tile:hover::before,.channel-tile:focus-visible::before,.channel-tile.touch-lift::before{transform:translateX(130%)}
 .channel-tile:active{transform:translateY(0) scale(.98);background:rgba(255,255,255,.78)}
 .channel-tile:hover img,.channel-tile:hover .channel-name,.channel-tile:hover .channel-arrow,.channel-tile.touch-lift img,.channel-tile.touch-lift .channel-name,.channel-tile.touch-lift .channel-arrow{transform:none}
}
@media(max-width:360px){.hero-copy .brand-seal{right:-58px;width:350px}.channel-tile .channel-arrow,.channel-tile .channel-arrow svg{width:13px;height:13px}}
@media(max-width:760px) and (hover:none){.channel-tile:hover:not(.touch-lift):not(:focus-visible){transform:translateZ(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 7px rgba(0,0,0,.035)}}
@media(prefers-reduced-motion:reduce){.channel-tile,.channel-tile::before{transition:none!important;transform:none!important}.channel-tile::before{display:none}}
@media(prefers-reduced-transparency:reduce){.channel-tile,.channel-tile:hover,.channel-tile:focus-visible,.channel-tile:active{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.hero-copy{--seal-opacity:.06}}