.page-relative { --relative-accent: #bea3d1; }
.relative-hero { padding: 72px 0 46px; text-align: center; }
.relative-hero h1 { font-size: clamp(32px,5vw,56px); font-weight: 400; letter-spacing: .12em; }
.relative-note, .english-name { color: #a49aaa; font-size: 12px; }
.liber-index { display: flex; gap: 24px; flex-wrap: wrap; padding: 20px 0; border-block: 1px solid #302b35; }
.relative-section { padding: 56px 0; scroll-margin-top: 24px; }
.relative-section h2 { font-weight: 400; font-size: 28px; margin-bottom: 36px; }
.relative-character { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 44px; margin: 44px 0 64px; }
.relative-character h3 { font-size: 25px; font-weight: 400; margin: 24px 0; }
.relative-character p, .relative-lore p { font-size: 14px; line-height: 2.2; color: #c5bdcc; }
.relative-portrait { position: relative; overflow: hidden; height: 360px; background: white; }
.relative-portrait img { position: absolute; width: auto; max-width: none; height: 100%; left: 50%; transform: translateX(-27%); }
.avril .relative-portrait img { transform: translateX(-37%); }
.scenario { color: #bea3d1 !important; border-left: 1px solid #bea3d1; padding-left: 14px; }
.avril .scenario { color: #e4a1ad !important; border-color: #e4a1ad; }
.relative-lore { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 48px; }
.relative-lore h3 { font-size: 19px; color: #d1b5dc; font-weight: 400; }
.page-relative summary { color: #c5a4cf; cursor: pointer; padding: 10px 0; font-size: 13px; }
@media(max-width:700px) { .relative-character, .relative-lore { grid-template-columns: 1fr; gap: 22px; } .relative-portrait { height: 300px; max-width: 420px; } .relative-section { padding: 36px 0; } }

.unnamed .relative-portrait img { transform: translateX(-30%); }
.dinkinesh .relative-portrait img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; transform: translateX(-50%); }
.relative-lore h3 { line-height: 2.2; overflow-wrap: anywhere; }
.relative-lore p, .relative-character p { overflow-wrap: anywhere; }
.relative-open { border: 0; background: none; color: #c5a4cf; padding: 10px 0; font: inherit; font-size: 13px; cursor: pointer; }
.relative-dialog { width: min(620px,calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; box-sizing: border-box; background: #19171e; color: #eee6f0; border: 1px solid #655362; padding: 36px; }
.relative-dialog::backdrop { background: #000b; }
.relative-dialog p { font-size: 14px; line-height: 2.2; }
.relative-dialog h3 { padding-right: 20px; }
.relative-close { position: absolute; right: 12px; top: 10px; border: 0; background: none; color: #c5a4cf; font-size: 26px; cursor: pointer; }

.page-relative ruby { ruby-align: space-between; white-space: nowrap; }
.page-relative rt { font-size: 11px; line-height: 1.3; font-weight: 400; color: #d8ccdf; padding-bottom: 3px; }
.page-relative h3 rt { font-size: 12px; }

.relative-section > h2 { padding-left: 0; }
.relative-section > h2::before { content: ""; display: inline-block; width: .64em; height: 1.25em; margin-right: .4em; vertical-align: -.2em; background: url('/src/ico/treble-clef.svg') center / contain no-repeat; filter: invert(84%) sepia(12%) saturate(588%) hue-rotate(295deg); }
.relative-dialog { padding: 24px; }
.relative-dialog > form[method="dialog"] { height: 0; }
.relative-dialog h3 { margin: 0 0 16px; padding-right: 52px; }
.relative-dialog p { margin: 0 0 16px; line-height: 2; }
.relative-dialog p:last-child { margin-bottom: 0; }