/* ViCamBachGiai — balanced story detail header. */
.story-page .story-hero{align-items:start;grid-template-columns:minmax(7.4rem,34%) minmax(0,1fr)}
.story-page .story-cover{align-self:start}
.story-page .story-cover .cover-frame{width:100%;height:auto;aspect-ratio:2/3}
.story-page .story-cover .cover-frame img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.story-page .story-info{align-self:start;min-height:0;gap:clamp(.3rem,.75vw,.58rem);justify-content:flex-start}
.story-page .story-copy{display:flex;flex-direction:column;gap:.2rem}
.story-page .story-info .badge{font-size:clamp(.64rem,1.7vw,.76rem);margin:0}
.story-page .story-info h1{font-size:clamp(1.62rem,5.35vw,2.85rem);line-height:1.02;letter-spacing:-.025em;margin:.08rem 0 .22rem;font-weight:600;text-wrap:balance}
.story-page .story-info .by{margin:0 0 .25rem;font-size:clamp(.78rem,2vw,.94rem)}
.story-page .story-info .tags{gap:.25rem}.story-page .chip{padding:.14rem .52rem;font-size:clamp(.61rem,1.65vw,.72rem)}
.story-page .story-metrics{min-height:0;border-radius:10px;margin-top:clamp(.3rem,.8vw,.65rem)}
.story-page .metric{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;justify-content:center;column-gap:.22rem;row-gap:.02rem;padding:.28rem .1rem .26rem}
.story-page .metric-ico{grid-column:1;grid-row:1;font-size:.7rem;align-self:center}.story-page .metric b{grid-column:2;grid-row:1;font-size:clamp(.72rem,1.9vw,.9rem);align-self:center}.story-page .metric small{grid-column:1/3;grid-row:2;font-size:clamp(.5rem,1.3vw,.61rem);line-height:1.1;white-space:nowrap}
.story-page .story-acts{gap:clamp(.3rem,.65vw,.48rem);margin-top:clamp(.12rem,.35vw,.28rem)}.story-page .story-acts .btn{min-height:34px;height:clamp(34px,7vw,40px);padding:0 .32rem;font-size:clamp(.66rem,1.8vw,.8rem);border-radius:9px}
@media(min-width:720px){.story-page .story-hero{grid-template-columns:minmax(10.5rem,30%) minmax(0,1fr)}.story-page .story-info h1{font-size:clamp(2rem,4.6vw,3.25rem)}}
@media(max-width:420px){.story-page .story-hero{grid-template-columns:minmax(7.15rem,35%) minmax(0,1fr);gap:.65rem}.story-page .story-info h1{font-size:clamp(1.45rem,5.9vw,1.85rem)}.story-page .metric small{font-size:.49rem}.story-page .story-acts .btn{font-size:.64rem}}

/* Tablet spacing: content flows naturally in both orientations. */
@media (min-width:600px) and (max-width:1180px){.story-page .story-info{gap:clamp(.38rem,.7vw,.62rem)}.story-page .story-copy{gap:clamp(.16rem,.35vw,.3rem)}.story-page .story-info h1{margin:.06rem 0 clamp(.18rem,.35vw,.3rem);line-height:1.04}.story-page .story-info .by{margin:0 0 clamp(.18rem,.4vw,.34rem)}.story-page .story-metrics{margin-top:clamp(.35rem,.7vw,.62rem)}.story-page .story-acts{margin-top:clamp(.1rem,.3vw,.25rem)}}