.feat-hero{
position:relative;
width:calc(100% - var(--gap) * 2);
margin:var(--gap) auto 0;
border-radius:var(--br1);
overflow:visible;
box-shadow:0 2px 4px rgba(0,0,0,0.15),0 4px 8px rgba(0,0,0,0.1);
}
.feat-hero::before,
.feat-hero::after{
content:'';
position:absolute;
top:6px;
left:-4px;
right:-4px;
bottom:-8px;
border-radius:var(--br1);
}
.feat-hero::before{
background:rgba(0,0,0,0.12);
z-index:-1;
transform:rotate(-0.3deg);
}
.feat-hero::after{
background:rgba(0,0,0,0.08);
z-index:-2;
transform:rotate(0.5deg);
}
.feat-hero-img{
width:100%;
height:auto;
display:block;
border-radius:var(--br1);
}
.feat-hero-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:var(--gap);
z-index:2;
border-radius:0 0 var(--br1) var(--br1);
}
.feat-hero-inner{
margin:0 auto;
text-align:center;
}
.feat-hero-title{
font-family:var(--ff2);
font-weight:800;
font-size:58px;
line-height:1.2;
letter-spacing:-.5px;
color:#fff;
margin:0 0 var(--gd2);
text-shadow:0 2px 4px rgba(0,0,0,0.8),0 1px 2px rgba(0,0,0,0.6);
}
.feat-hero-meta{
font-size:var(--fz1);
line-height:var(--lh1);
color:rgba(255,255,255,0.9);
text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.feat-hero-meta a{
color:rgba(255,255,255,0.95);
text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.feat-hero-meta a:hover{
color:#fff;
text-decoration:underline;
text-decoration-thickness:1px;
}
.feat-hero-meta .meta-cat{
color:rgba(255,255,255,0.95);
}
.feat-hero-meta .meta-cat:hover{
color:#fff;
}
.feat-hero-date{
color:rgba(255,255,255,0.9);
}
.feat-hero-date:hover{
color:#fff;
text-decoration:underline;
text-decoration-thickness:1px;
}
.feat-scroll-hint{
position:fixed;
bottom:var(--gap);
left:50%;
transform:translateX(-50%);
z-index:100;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
}
.feat-scroll-hint.visible{
opacity:1;
pointer-events:auto;
}
.feat-scroll-hint svg{
width:var(--iz1);
height:var(--iz1);
fill:var(--tx1);
stroke:var(--tx1);
filter:drop-shadow(0 1px 1px rgba(0,0,0,0.25));
animation:feat-bounce 1.5s ease-in-out infinite;
}
@keyframes feat-bounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(3px);}
}