/* ViCamBachGiai — iPad portrait story detail.
   Locks the right column to the natural 2:3 cover height. */
@media (min-width:720px) and (max-width:1023px) and (orientation:portrait){
  .story-page{
    width:min(100% - 2rem,960px);
    padding-top:.9rem;
  }

  .story-page .story-hero{
    --portrait-cover-w:clamp(13rem,29vw,16.5rem);
    grid-template-columns:var(--portrait-cover-w) minmax(0,1fr);
    gap:clamp(1rem,2.2vw,1.45rem);
    height:calc(var(--portrait-cover-w) * 1.5);
    align-items:stretch;
  }

  .story-page .story-cover{
    width:var(--portrait-cover-w);
    height:100%;
    align-self:stretch;
  }

  .story-page .story-cover .cover-frame{
    width:100%;
    height:100%;
    aspect-ratio:2/3;
    border-radius:11px;
    overflow:hidden;
  }

  .story-page .story-cover .cover-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 18%;
  }

  .story-page .story-info{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:clamp(.32rem,.7vw,.52rem);
    height:100%;
    min-height:0;
    overflow:hidden;
    align-self:stretch;
    padding:0;
  }

  .story-page .story-copy{
    min-height:0;
    gap:.12rem;
  }

  .story-page .story-info .badge{
    font-size:.66rem;
    letter-spacing:.13em;
  }

  .story-page .story-info h1{
    margin:.05rem 0 .2rem;
    font-size:clamp(1.75rem,4.2vw,2.5rem);
    line-height:1.02;
  }

  .story-page .story-info .by{
    margin:0 0 .2rem;
    font-size:.82rem;
  }

  .story-page .story-info .tags{gap:.22rem}
  .story-page .chip{
    padding:.13rem .48rem;
    font-size:.64rem;
  }

  .story-page .story-landscape-meta{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
    padding:.12rem 0 1.05rem;
    background:transparent;
    border:0;
  }

  .story-page .story-landscape-meta h2{
    flex:0 0 auto;
    margin:0 0 .36rem;
    color:#b9acf0;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .story-page .story-landscape-meta .landscape-info-body{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:0 .25rem .8rem 0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  }

  .story-page .story-landscape-meta .landscape-info-body::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  .story-page .story-landscape-meta .landscape-info-body p{
    display:grid;
    grid-template-columns:minmax(5rem,max-content) minmax(0,1fr);
    gap:.5rem;
    margin:0 0 .28rem;
    color:#d9dceb;
    font-size:.73rem;
    line-height:1.35;
  }

  .story-page .story-landscape-meta .landscape-info-body strong{
    color:#858da2;
    font-size:.69rem;
    font-weight:500;
  }

  .story-page .story-landscape-meta .landscape-info-body span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .story-page .story-landscape-meta::after{
    content:"⌄";
    position:absolute;
    left:50%;
    bottom:.02rem;
    transform:translateX(-50%);
    color:#b9a8ff;
    font-size:1.05rem;
    line-height:1;
    pointer-events:none;
    text-shadow:0 0 12px rgba(160,139,255,.42);
  }

  .story-page .story-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    min-height:0;
    margin:0;
    border:0;
    border-top:1px solid rgba(168,154,230,.18);
    border-radius:0;
    background:transparent;
    overflow:visible;
  }

  .story-page .metric{
    min-width:0;
    padding:.25rem .12rem .22rem;
    border-left:1px solid rgba(168,154,230,.14);
    background:transparent;
  }

  .story-page .metric:first-child{border-left:0}
  .story-page .metric-ico{font-size:.66rem}
  .story-page .metric b{font-size:.78rem}
  .story-page .metric small{font-size:.49rem;white-space:nowrap}

  .story-page .story-acts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.38rem;
    margin:0;
  }

  .story-page .story-acts .btn{
    min-width:0;
    min-height:35px;
    height:35px;
    padding:0 .35rem;
    border-radius:8px;
    font-size:.68rem;
    white-space:nowrap;
  }

  .story-page .story-acts .btn:first-child{
    background:linear-gradient(180deg,rgba(190,177,246,.3),rgba(134,113,215,.21));
    border-color:rgba(196,181,253,.56);
    box-shadow:0 6px 16px rgba(80,62,150,.13);
  }

  .story-page .story-tabs{
    margin:.72rem 0 .68rem;
  }

  .story-page .story-tabs a{
    padding:.6rem .2rem .48rem;
    font-size:.79rem;
  }

  .story-page .story-tab>.info-card{
    display:none;
  }
}