.character-profile {
  max-width: 1260px;
  margin: 36px auto 70px;
  padding: 0 5%;
}
.character-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 36px 50px;
  align-items: center;
}
.character-heading h1 {
  font-size: clamp(42px, 4.3vw, 60px);
  margin-bottom: 22px;
}
.character-heading .intro { font-size: 23px; max-width: 34ch; }
.character-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.character-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-size: 18px;
  text-decoration-color: var(--line);
}
.character-contents a:hover { text-decoration-color: var(--brass); }
.character-hero .world-portrait { position: static; width: 100%; margin: 0; }
.character-hero .world-portrait img { width: 100%; height: auto; object-fit: contain; }
.character-hero .world-portrait figcaption { padding-bottom: 0; }
.character-biography { margin: 42px 0 0; }
.character-biography .world-prose { max-width: 690px; }
.character-detail {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.character-detail h3 { margin: 0 0 12px; font-size: 27px; font-weight: 400; }
.character-detail p { margin: 0; color: var(--muted); font-size: 21px; line-height: 1.65; }
.character-members { margin-top: 30px; }
.character-members h2 { font-size: 27px; margin-bottom: 12px; }
.character-members ul, .character-customs ul { list-style: none; padding: 0; margin: 0; }
.character-members ul { display: flex; flex-wrap: wrap; gap: 0 30px; }
.character-shared { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-top: 25px; font-size: 18px; }
.character-shared > span { color: var(--muted); }
.character-section { margin-top: 55px; padding-top: 35px; border-top: 1px solid var(--line); }
.character-section > h2, .character-profile .world-stories > h2 { font-size: 35px; margin-bottom: 30px; }
.character-profile [id] { scroll-margin-top: 26px; }
.character-connections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px 42px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.character-connection {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.character-connection figure { margin: 0; }
.character-connection figure a { display: block; min-height: 44px; }
.character-connection img { width: 100%; height: auto; object-fit: contain; }
.character-connection figcaption, .character-art-note {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0;
}
.character-connection h3 { margin: -8px 0 0; font: 400 27px/1.3 var(--body); }
.character-connection h3 a, .character-place-list h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 6px;
  text-decoration: none;
}
.character-connection h3 a:hover, .character-place-list h3 a:hover { text-decoration: underline; }
.character-relationship-label { color: var(--brass); font-size: 18px; margin: 3px 0 12px; }
.character-relationship-summary { font-size: 20px; line-height: 1.6; margin: 0; }
.character-place-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 42px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.character-place-picture { display: block; }
.character-place-picture img { width: 100%; height: auto; }
.character-place-list h3 { margin: 17px 0 5px; font: 400 31px/1.3 var(--body); }
.character-place-list > li > p:not(.character-art-note) { font-size: 21px; margin: 0; max-width: 48ch; }
.character-reading-links { max-width: 690px; margin-top: 45px; }
.character-reading-links .small-discoveries { padding: 25px 0; margin: 0 0 30px; }
.character-reading-links h2, .character-reading-links h3 { font-size: 29px; font-weight: 400; margin: 0 0 18px; }
.character-profile .world-stories { margin-top: 50px; }
.character-profile .story-art img { transform: none; transition: none; }
.character-next ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 22px 42px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.character-next-link { display: inline-block; min-height: 44px; padding: 6px 0; font-size: 27px; line-height: 1.4; }
.character-next li > p { color: var(--muted); font-size: 19px; margin: 10px 0 0; max-width: 34ch; }
@media (max-width: 950px) {
  .character-hero { gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .character-heading h1 { font-size: 43px; }
  .character-connections { grid-template-columns: 1fr; }
  .character-connection { grid-template-columns: 180px minmax(0, 1fr); gap: 26px; }
  .character-relationship-summary { max-width: 48ch; }
}
@media (max-width: 700px) {
  .character-profile { margin: 24px 24px 55px; padding: 0; }
  .character-hero { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
  .character-heading h1 { font-size: 43px; margin-bottom: 18px; }
  .character-heading .intro { font-size: 21px; margin-bottom: 16px; max-width: 100%; }
  .character-contents { margin-top: 16px; column-gap: 23px; }
  .character-contents a { font-size: 17px; }
  .character-hero .world-portrait { order: initial; }
  .character-hero .world-portrait figcaption { font-size: 16px; }
  .character-biography { margin-top: 29px; }
  .character-section { margin-top: 38px; padding-top: 28px; }
  .character-section > h2, .character-profile .world-stories > h2 { font-size: 31px; margin-bottom: 25px; }
  .character-connection { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; }
  .character-connection h3 { font-size: 26px; }
  .character-connection figcaption { font-size: 14px; }
  .character-relationship-summary { font-size: 19px; }
  .character-relationship-label { font-size: 17px; }
  .character-place-list { grid-template-columns: 1fr; gap: 30px; }
  .character-place-list h3 { font-size: 29px; }
  .character-place-list > li > p:not(.character-art-note) { font-size: 20px; }
  .character-reading-links { margin-top: 35px; }
  .character-profile .world-stories { margin-top: 35px; }
  .character-next ul { grid-template-columns: 1fr; gap: 24px; }
  .character-next-link { font-size: 26px; }
  .character-next li > p { margin-top: 3px; max-width: none; }
}
@media (max-width: 370px) {
  .character-heading h1 { font-size: 39px; }
  .character-connection { grid-template-columns: 1fr; gap: 14px; }
  .character-connection figure { max-width: 180px; }
  .character-connection h3 { margin-top: 0; }
}