@import url("/iv.css") layer(civic);

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/graphics/brand-guidelines/fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
.iv-hero-title #feature-title {
  display: block;
  width: 100%;
  color: #171b22;
  font: 700 clamp(27px, 4.7vw, 64px)/1.1 'IBM Plex Sans', sans-serif;
  letter-spacing: -.05em;
  text-transform: none;
}
#feature-title span {
  display: inline-block;
  max-width: 25ch;
  margin-top: .5em;
  font-size: .62em;
  text-wrap: balance;
}
.iv-article-introduction { margin-top: 3rem; }
.iv-chapter-nav select { min-width: 0; }
.iv-hero {
  height: auto;
  min-height: 0;
  max-height: none;
  background: white;
}
.iv-hero {
  position: relative;
  width: min(100%, 1380px);
  margin-inline: auto;
}
.iv-hero .iv-hero-title {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 53%;
  padding: 0;
  z-index: 1;
}
.cover-collage {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
}
.cover-collage image {
  x: var(--x);
  y: var(--y);
  width: var(--w);
  height: auto;
}
@media (max-width: 640px) {
  .cover-collage { aspect-ratio: 1.05; }
  .cover-collage image { x: var(--mx); y: var(--my); width: var(--mw); }
  .iv-hero .iv-hero-title { width: 57%; }
}
#contents { display: block; }
#contents .iv-contents-intro { position: static; margin-bottom: 24px; }
.upset-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.upset-cards a {
  display: inline-block;
  padding: 16px 18px;
  border: 1px solid #cdc9bf;
  color: inherit;
  text-decoration: none;
}
.upset-cards a:hover { background: #faf6ed; }
.upset-cards .iv-index-place, .upset-cards .iv-index-title { display: block; }
.upset-cards .iv-index-title { margin-top: 5px; line-height: 1.25; }
.iv-prose p:first-child { font-weight: 400; }