/* ViCamBachGiai — authoritative story-header geometry.
   The full-width story-top owns the two columns. The intermediate .story-hero
   is layout-neutral, so it can never shrink the information column. */

.story-page .story-cover,
.story-page .story-cover .cover-frame{aspect-ratio:2/3 !important}

.story-page .story-cover{
  min-width:0;
  height:auto !important;
  align-self:start !important;
  overflow:hidden;
}

.story-page .story-cover .cover-frame{
  width:100%;
  height:100% !important;
  overflow:hidden;
}

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

.story-page .story-info{
  min-width:0;
  max-width:none !important;
  container-type:inline-size;
}

.story-page .story-info>.story-copy,
.story-page .story-info>.story-landscape-meta,
.story-page .story-info>.story-metrics,
.story-page .story-info>.story-acts{
  box-sizing:border-box;
  width:100% !important;
  max-width:none !important;
  min-width:0;
}

.story-page .story-info h1.title-long{font-size:clamp(1.06rem,7.2cqi,2.15rem) !important}
.story-page .story-info h1.title-very-long{font-size:clamp(.94rem,6.15cqi,1.85rem) !important}

/* Portrait is one primary column. Related-story rails stay below the intro. */
@media (max-width:1099.98px) and (orientation:portrait){
  .story-page .story-detail-layout.is-intro,
  .story-page .story-detail-layout.is-secondary{
    display:block !important;
    width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important;
  }

  .story-page .story-detail-primary,
  .story-page .story-top{
    box-sizing:border-box;
    width:100% !important;
    max-width:none !important;
    min-width:0;
  }

  .story-page .story-landscape-sidebar{display:none !important}
}

/* story-top shares its right edge with the tabs and introduction card. */
@media all{
  .story-page .story-top{
    --story-cover-w:clamp(7.4rem,34vw,12.5rem);
    --story-column-gap:clamp(.65rem,2.4vw,1.35rem);
    position:relative;
    display:grid !important;
    grid-template-columns:var(--story-cover-w) minmax(0,1fr) !important;
    grid-template-rows:calc(var(--story-cover-w) * 1.5);
    column-gap:var(--story-column-gap);
    align-items:stretch;
    width:100% !important;
    max-width:none !important;
    min-width:0;
  }

  .story-page .story-hero{display:contents !important}

  .story-page .story-cover{
    position:static !important;
    grid-column:1;
    grid-row:1;
    width:var(--story-cover-w) !important;
    max-width:var(--story-cover-w) !important;
    height:calc(var(--story-cover-w) * 1.5) !important;
    max-height:calc(var(--story-cover-w) * 1.5) !important;
    align-self:stretch !important;
  }

  .story-page .story-info{
    position:static !important;
    inset:auto !important;
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:clamp(.24rem,1.1cqi,.52rem);
    width:auto !important;
    height:100% !important;
    max-height:100%;
    min-height:0;
    align-self:stretch;
    overflow:hidden !important;
  }

  .story-page .story-copy{
    grid-row:1;
    min-height:0;
    overflow:hidden !important;
  }

  .story-page .story-landscape-meta{
    min-height:0;
    overflow:hidden;
  }

  .story-page .story-landscape-meta .landscape-info-body{
    min-height:0;
    max-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }

  .story-page .story-metrics{grid-row:2;margin:0 !important}
  .story-page .story-acts{grid-row:3;margin:0 !important}

  .story-page .story-info h1{
    display:-webkit-box;
    margin-bottom:.12rem !important;
    padding-bottom:.06em;
    font-size:clamp(1.12rem,8.6cqi,1.82rem) !important;
    line-height:1.06 !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }

  .story-page .story-info .badge{font-size:clamp(.54rem,3.35cqi,.7rem)}
  .story-page .story-info .by{font-size:clamp(.67rem,4cqi,.9rem)}
  .story-page .story-info .tags{gap:clamp(.12rem,1cqi,.25rem)}
  .story-page .chip{padding:.09rem clamp(.27rem,2cqi,.48rem);font-size:clamp(.52rem,3.05cqi,.69rem)}
  .story-page .metric b{font-size:clamp(.65rem,3.8cqi,.84rem)}
  .story-page .metric small{font-size:clamp(.43rem,2.45cqi,.57rem)}
  .story-page .story-acts .btn{font-size:clamp(.57rem,3.3cqi,.74rem)}
}

/* Phone portrait: there is no readable story-metadata panel beside the cover.
   Scale the visible copy instead and distribute the three visible groups over
   the complete cover height. Short titles grow; long titles stay compact. */
@media (max-width:719px) and (orientation:portrait){
  .story-page .story-info{
    grid-template-rows:auto auto auto;
    align-content:space-between;
    row-gap:clamp(.28rem,1.7cqi,.52rem);
  }

  .story-page .story-copy{
    display:flex;
    flex-direction:column;
    gap:clamp(.12rem,1.25cqi,.3rem);
    overflow:visible !important;
  }

  .story-page .story-info h1{
    display:block;
    margin:0 !important;
    padding:0;
    font-size:clamp(1.5rem,12cqi,2.25rem) !important;
    line-height:1.02 !important;
    overflow:visible !important;
    text-wrap:balance;
    overflow-wrap:anywhere;
    -webkit-line-clamp:unset;
  }

  .story-page .story-info h1.title-long{
    font-size:clamp(1.18rem,9.5cqi,1.72rem) !important;
    line-height:1.04 !important;
  }

  .story-page .story-info h1.title-very-long{
    font-size:clamp(.98rem,8cqi,1.45rem) !important;
    line-height:1.05 !important;
  }

  .story-page .story-info .badge{
    font-size:clamp(.6rem,4cqi,.76rem);
    line-height:1.15;
  }

  .story-page .story-info .by{
    margin:0;
    font-size:clamp(.75rem,4.8cqi,.98rem);
    line-height:1.2;
  }

  .story-page .story-info .tags{
    gap:clamp(.16rem,1.35cqi,.3rem);
  }

  .story-page .chip{
    padding:clamp(.1rem,.75cqi,.16rem) clamp(.32rem,2.15cqi,.52rem);
    font-size:clamp(.58rem,3.55cqi,.74rem);
    line-height:1.12;
  }

  .story-page .story-metrics{
    min-height:clamp(2.2rem,21cqi,2.8rem);
  }

  .story-page .metric{
    padding-block:clamp(.28rem,1.9cqi,.44rem);
  }

  .story-page .metric b{font-size:clamp(.74rem,4.7cqi,.94rem)}
  .story-page .metric small{font-size:clamp(.47rem,2.85cqi,.61rem)}

  .story-page .story-acts{
    min-height:clamp(2.35rem,22cqi,2.9rem);
  }

  .story-page .story-acts .btn{
    min-height:100%;
    padding-inline:clamp(.2rem,1.3cqi,.4rem);
    font-size:clamp(.64rem,3.9cqi,.82rem);
  }
}

/* iPad portrait: only the second column grows; cover remains immutable. */
@media (min-width:720px) and (max-width:1099.98px) and (orientation:portrait){
  .story-page .story-top{
    --story-cover-w:clamp(13rem,29vw,16.5rem);
    --story-column-gap:clamp(1rem,2.2vw,1.45rem);
  }

  .story-page .story-info{grid-template-rows:auto minmax(0,1fr) auto auto}
  .story-page .story-copy{grid-row:1}
  .story-page .story-landscape-meta{grid-row:2}
  .story-page .story-metrics{grid-row:3}
  .story-page .story-acts{grid-row:4}
  .story-page .story-info h1{font-size:clamp(1.48rem,7.6cqi,2.45rem) !important}
  .story-page .story-info h1.title-long{font-size:clamp(1.25rem,6.6cqi,2.05rem) !important}
  .story-page .story-info h1.title-very-long{font-size:clamp(1.08rem,5.7cqi,1.76rem) !important}
}

/* Landscape keeps its related-story rail. story-top owns only the primary
   area, so the information column cannot invade the rail. */
@media (min-width:640px) and (orientation:landscape), (min-width: 1100px){
  .story-page .story-detail-layout.is-intro{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) clamp(9.3rem,17vw,12.5rem) !important;
    gap:clamp(.65rem,1.35vw,1rem) !important;
  }

  .story-page .story-landscape-sidebar{display:block !important}

  .story-page .story-top{
    --story-cover-w:clamp(8.7rem,19vw,15.5rem);
    --story-column-gap:clamp(.75rem,2vw,1.35rem);
  }

  .story-page .story-info{grid-template-rows:auto minmax(0,1fr) auto auto}
  .story-page .story-copy{grid-row:1}
  .story-page .story-landscape-meta{grid-row:2}
  .story-page .story-metrics{grid-row:3}
  .story-page .story-acts{grid-row:4}
}

@media (min-width:720px) and (min-height:601px) and (orientation:landscape), (min-width: 1100px){
  .story-page .story-top{--story-cover-w:clamp(11.5rem,min(23vw,calc(66.667dvh - 8rem)),15.5rem)}
}

@media (orientation:landscape), (min-width: 1100px){
  .story-page{
    --story-dock-space:calc(3.7rem + env(safe-area-inset-bottom));
    padding-bottom:max(4.25rem,var(--story-dock-space)) !important;
  }

  .story-dock{
    min-height:calc(3.25rem + env(safe-area-inset-bottom));
    padding:.34rem .75rem calc(.34rem + env(safe-area-inset-bottom));
  }

  .story-dock .dock-read,
  .story-dock .dock-fav{min-height:38px}
}