/* ==========================================================================
   0) SAFETY: deconflict any generic “story-body” component styles
   ========================================================================== */

body.story{
  /* Match your hero container width */
  --max: var(--hero-max);
}

body.story .story-body{
  display: block;
}

/* ==========================================================================
   1) HERO: poster/cover friendly override (story pages only)
   ========================================================================== */

/* Base story hero card (portrait media + text beside it) */
body.story .story-hero-card{
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  padding: clamp(14px, 2vw, 18px);
}

/* Don’t force a banner height on story hero media */
body.story .story-hero-media{
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Poster slot */
body.story .story-hero-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: none;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

body.story .story-hero-content{
  padding: 0;
  align-content: center;
}

/* Responsive: stack poster above text */
@media (max-width: 860px){
  body.story .story-hero-card{ grid-template-columns: 1fr; }
  body.story .story-hero-media img{
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   1B) HARD DECONFLICT: Topics banner rules must NOT affect story hero
   This prevents topics.css (.topics-hero-media aspect-ratio: 3/2, height:100%)
   from turning the story poster into a cropped banner.
   ========================================================================== */

body.story .story-hero .topics-hero-card.story-hero-card{
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  padding: clamp(14px, 2vw, 18px);
}

body.story .story-hero .topics-hero-media.story-hero-media{
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.story .story-hero .topics-hero-media.story-hero-media img{
  width: 100%;
  height: auto !important;
  aspect-ratio: 2 / 3;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}

body.story .story-article > .story-section{
  margin-bottom: clamp(22px, 3vw, 34px);
}

/* Last section should not create a hanging gap before footer/nav */
body.story .story-article > .story-section:last-of-type{
  margin-bottom: 0;
}

/* ==========================================================================
   2) BODY LAYOUT: Desktop 2-col grid using normal site container
   IMPORTANT: DO NOT override .container width/max here.
   ========================================================================== */

body.story .story-layout{
  width: 100%;
}

body.story .story-layout--toc{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  width: 100%;
}

body.story .story-article,
body.story .story-aside{
  min-width: 0;
}

/* Article must NOT be clamped by any other rules */
body.story .story-article{
  width: 100%;
  max-width: none;
}

/* Stack on mobile/tablet */
@media (max-width: 980px){
  body.story .story-layout--toc{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3) Optional: if you ever apply bleed-pad to the WHOLE layout
   Keep the grid “one unit” while preserving content padding alignment.
   ========================================================================== */

body.story .story-layout--toc.bleed-pad{
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ==========================================================================
   4) STORY TOPIC NAV: remove the “fake border” caused by inset box-shadow
   (This is the line you identified.)
   ========================================================================== */

body.story .topic-nav-surface--story .topic-nav-card{
  /* Keep depth, remove inset frame */
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}