.trio-hero { padding-block: 2.5rem 3.5rem; }
.trio-hero h1 { max-width: 58rem; margin: 1.4rem 0; font: 400 clamp(3rem, 7vw, 5.8rem)/1.04 var(--serif); letter-spacing: -.035em; }
.trio-hero h1 em { color: #efcb85; font-weight: 400; }
.trio-hero .dek { max-width: 44rem; }
.story-toc { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0; }
.story-toc a { padding: .6rem 1rem; border: 1px solid #4f4538; border-radius: 9999px; text-decoration: none; font-size: .9rem; }
.trio-plate { border: 1px solid #695443; border-radius: 1.5rem; overflow: hidden; background: radial-gradient(ellipse at 50% 20%, #694328, #241d19 85%); }
.trio-plate > figcaption { padding: .85rem 1.3rem; background: #171516; color: #d0bda9; font-size: .8rem; text-align: center; }
.cast-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding: 1.8rem 2rem 0; gap: 1rem; }
.cast-lineup > div { min-width: 0; text-align: center; }
.cast-lineup img { width: 100%; height: clamp(10rem, 23vw, 17rem); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 10px #0005); }
.cast-lineup strong { display: block; color: #ffdfab; font-size: 1.1rem; margin-bottom: .5rem; }
.cast-lineup p { color: #efdac2; font-size: .9rem; line-height: 1.5; max-width: 14rem; margin: 0 auto 1rem; }
.story-section { margin-block: 4.5rem; scroll-margin-top: 2rem; }
.story-section > .prose { margin-bottom: 2rem; }
.chapter-number { color: #d5b58a; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.comic-scene { position: relative; padding: 1.7rem 1.7rem 0; border-radius: 1.5rem 1.5rem 0 0; overflow: hidden; }
.comic-scene::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.2rem; background: #0003; }
.comic-scene--court { background: repeating-linear-gradient(90deg, transparent 0 22%, #ab784b22 22% 23%), radial-gradient(ellipse at 50% 0, #805637, #2c221c); }
.comic-scene--awards { background: radial-gradient(circle at 10% 22%, #f5d79a 0 2px, transparent 3px), radial-gradient(circle at 83% 18%, #f5d79a 0 3px, transparent 4px), radial-gradient(circle at 64% 48%, #e6aafb 0 2px, transparent 3px), radial-gradient(ellipse at 50% 0, #754478, #20122b); }
.comic-scene--gallery { background: linear-gradient(180deg, #eee5d4, #d0bf9e); }
.scene-sign { width: fit-content; margin: 0 auto 1.7rem; border: 1px solid #c9a86c; padding: .5rem 1.5rem; border-radius: .3rem; background: #181217aa; color: #f1dca8; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.comic-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: end; }
.comic-role { position: relative; min-width: 0; }
.speech { position: relative; padding: 1rem .9rem; margin-bottom: 1.1rem; background: #fff5df; border: 2px solid #513b32; color: #342321; border-radius: 1rem; text-align: center; font-size: clamp(.85rem, 1.5vw, 1.1rem); font-weight: 500; line-height: 1.4; min-height: 5.2rem; display: grid; place-items: center; }
.speech::after { content: ''; position: absolute; bottom: -.55rem; left: calc(50% - .45rem); width: .8rem; height: .8rem; background: #fff5df; border-right: 2px solid #513b32; border-bottom: 2px solid #513b32; transform: rotate(45deg); }
.comic-role img { width: 100%; height: clamp(11rem, 25vw, 18rem); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 7px #0004); }
.comic-role .role-name { display: block; margin: .5rem 0 1.4rem; text-align: center; font-size: .75rem; color: #edd7bd; }
.comic-scene--gallery .role-name { color: #4c3a30; }
.scene-caption { padding: 1rem 1.3rem; color: #c9b8a8; background: #161416; font-size: .85rem; border-top: 1px solid #65503c; }
.feature-note { max-width: 44rem; margin: 1.8rem auto 0; border-left: 2px solid #d5b58a; padding: .3rem 0 .3rem 1.3rem; }
.feature-note p { color: #c4c4cc; }
.feature-note strong { color: #efe9df; }
.watch-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--gold); margin-top: 1rem; font-size: .9rem; }
.unlock { padding: 1.2rem 1.4rem; margin: 1.5rem 0; background: #1a1d20; border: 1px solid #45423a; border-radius: .8rem; color: #f0dfc2; }
.unlock ol { margin: .8rem 0 0; padding-left: 1.4rem; }
.unlock li { padding-left: .3rem; margin: .3rem 0; }
.search-card { display: flex; align-items: center; gap: .8rem; max-width: 24rem; padding: 1rem 1.3rem; margin-top: 1.5rem; border: 2px solid #d5b58a; border-radius: 9999px; text-decoration: none; background: #f5eddf; color: #302927; }
.search-card:hover { color: #302927; background: #fff6e6; }
.search-card svg { width: 1.3rem; height: 1.3rem; flex: none; }
.search-card strong { flex: 1; font-weight: 600; }
.feature__image--trio { display: grid; place-items: center; background: #423023; padding: 1.2rem; }
.feature__image--trio img { object-fit: contain; height: auto; }
@media (max-width: 640px) {
  .trio-hero { padding-block: 1.7rem 2.5rem; }
  .trio-hero h1 { font-size: clamp(2.9rem, 12vw, 4.2rem); }
  .cast-lineup { padding: 1.2rem .6rem 0; gap: .4rem; }
  .cast-lineup strong { font-size: .85rem; }
  .cast-lineup p { font-size: .72rem; }
  .cast-lineup img { height: 8rem; }
  .story-section { margin-block: 3rem; }
  .comic-scene { padding: 1.2rem .65rem 0; }
  .comic-trio { gap: .4rem; }
  .comic-role img { height: 8rem; }
  .speech { padding: .7rem .4rem; font-size: .74rem; min-height: 6rem; border-radius: .7rem; }
  .comic-role .role-name { font-size: .65rem; }
  .scene-sign { font-size: .65rem; padding-inline: 1rem; }
  .scene-caption { font-size: .78rem; }
}