/* =========================================================
   EXPERTISE — THREE CORE AREAS v104
   Deliberately balanced after removing the former fourth area.
   ========================================================= */

body[data-story-page="skills"] .story-chapters{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}

body[data-story-page="skills"] .story-chapter{
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto 1fr!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}

body[data-story-page="skills"] .story-chapter-media{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1.72 / 1!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:var(--surface2)!important;
}

body[data-story-page="skills"] .story-chapter-media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

body[data-story-page="skills"] .story-chapter-body{
  min-width:0!important;
  padding:16px 16px 15px!important;
  display:flex!important;
  flex-direction:column!important;
}

body[data-story-page="skills"] .story-chapter h3{
  margin:0 0 7px!important;
  font-size:1.05rem!important;
  line-height:1.22!important;
  color:var(--primary2)!important;
}

body[data-story-page="skills"] .story-chapter-body>p{
  margin:0!important;
  font-size:.78rem!important;
  line-height:1.55!important;
  color:var(--muted)!important;
}

body[data-story-page="skills"] .story-more{
  margin-top:auto!important;
  padding-top:14px!important;
}

body[data-story-page="skills"] .story-chapter-meta,
body[data-story-page="skills"] .story-chapter .tags{
  display:none!important;
}

/* The expertise page becomes content-led; thematic map remains compact. */
body[data-story-page="skills"] .story-layout{
  align-items:start!important;
}

body[data-story-page="skills"] .story-map-shell{
  border-color:var(--line)!important;
  background:var(--surface)!important;
}

/* The active card gets only a subtle academic border, not a commercial glow. */
body[data-story-page="skills"] .story-chapter.is-active{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line))!important;
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--primary) 58%,transparent)!important;
}

/* Tablet: 2 + 1, with the third card spanning the row for balance. */
@media(max-width:1180px){
  body[data-story-page="skills"] .story-chapters{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body[data-story-page="skills"] .story-chapter:nth-child(3){
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:minmax(240px,.42fr) minmax(0,.58fr)!important;
    grid-template-rows:1fr!important;
  }

  body[data-story-page="skills"] .story-chapter:nth-child(3) .story-chapter-media{
    height:100%!important;
    aspect-ratio:auto!important;
    border-bottom:0!important;
    border-right:1px solid var(--line)!important;
  }
}

/* Mobile: clean vertical cards. */
@media(max-width:720px){
  body[data-story-page="skills"] .story-chapters{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }

  body[data-story-page="skills"] .story-chapter:nth-child(3){
    grid-column:auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 1fr!important;
  }

  body[data-story-page="skills"] .story-chapter:nth-child(3) .story-chapter-media{
    height:auto!important;
    aspect-ratio:1.72 / 1!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }

  body[data-story-page="skills"] .story-chapter-body{
    padding:14px!important;
  }
}