/* A1 ornaments are fixed-scale CSS sprite windows. Only plain border lines
   extend with the panel: nine-slice stretch also distorted the side diamonds. */
.history { background:linear-gradient(135deg,#172634,#243b4a 65%,#192b3b); border-top:1px solid #c4a57155; }
.history-tabs { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px; }
[hidden] { display:none!important; }
.history-tabs button { border:1px solid #7997b6;background:#142535;color:#e5eaf0;padding:17px 12px;font-family:var(--serif);font-size:18px;letter-spacing:.08em;transition:background .2s,border-color .2s; }
.history-tabs button span { font-size:11px;color:#b8c8dc;margin-right:15px; }
.history-tabs button:hover { background:#2b4c70;border-color:#e4d2b0; }
.history-tabs button[aria-selected="true"] { background:#f0f1f3;color:#285391;border-color:#f0f1f3;box-shadow:inset 0 -4px #7c9abf; }
.history-tabs button[aria-selected="true"] span { color:#285391; }
.history-person { display:grid;grid-template-columns:40% 60%;min-height:670px;align-items:stretch;margin-bottom:24px; }
.history-portrait { position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;border:1px solid #b5a07770;border-right:0;background:radial-gradient(ellipse at 50% 36%,#536b79,#273d4b 58%,#192c39); }
.history-portrait:before { content:'';position:absolute;inset:17px;border:1px solid #ceb17a50;z-index:-1; }
.history-portrait:after { content:'';position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,#182b38);pointer-events:none; }
.history-portrait>img { width:100%;height:610px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 22px #0c1b2666); }
.portrait-symbol { position:absolute;top:0;right:28px;font-family:var(--serif);font-size:210px;line-height:1.5;color:#d6c09116;z-index:-1; }
.portrait-label { position:absolute;bottom:20px;left:0;width:100%;text-align:center;color:#d5dce1;font-size:10px;letter-spacing:.12em;z-index:1; }
.history-copy { position:relative;background:#f0f1f3;color:#234b7e;border:46px solid transparent;padding:0 12px 6px; }
.history-frame { position:absolute;inset:-46px;pointer-events:none;border:2px solid #2b5797; }
.history-frame:before { content:'';position:absolute;inset:5px;border:1px solid #2b5797; }
.history-frame i { position:absolute;display:block;background-image:url('assets/dialogue-frame.png');background-repeat:no-repeat;background-size:576.32px 99.84px; }
.history-frame .corner { width:46.4px;height:30.4px; }
.history-frame .tl { left:-2px;top:-2px;background-position:left top; }
.history-frame .tr { right:-2px;top:-2px;background-position:right top; }
.history-frame .bl { left:-2px;bottom:-2px;background-position:left bottom; }
.history-frame .br { right:-2px;bottom:-2px;background-position:right bottom; }
.history-frame .side { width:18px;height:40px;top:50%;transform:translateY(-50%); }
.history-frame .sl { left:-2px;background-position:left center; }
.history-frame .sr { right:-2px;background-position:right center; }
.history-role { font-size:11px;letter-spacing:.12em;color:#526887;margin:0 0 30px; }
.history-copy h3 { font-size:clamp(30px,3vw,43px);line-height:1.6;letter-spacing:.1em;margin:0 0 17px; }
.history-copy ruby { ruby-align:center; }
.history-copy rt { font-family:var(--sans);font-size:11px;letter-spacing:.12em;font-weight:400; }
.history-lead { font-family:var(--serif);font-size:21px;line-height:1.8;margin-bottom:25px; }
.history-copy dl { margin:0; }
.history-copy dl>div { border-top:1px solid #bac7d8;padding-top:15px;margin-top:18px; }
.history-copy dt { font-family:var(--serif);font-size:13px;color:#285391;letter-spacing:.12em;margin-bottom:7px; }
.history-copy dd { margin:0;font-size:15px;line-height:1.95;color:#415773; }
.history-source { display:block;margin-top:9px;font-size:10px;color:#406590;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere; }
.history-source:hover { color:#102d54; }
.history-note { max-width:940px;margin:35px auto 0;border-left:2px solid #a38d66;padding-left:24px;color:#bcc9d2; }
.history-note h3 { font-size:15px;color:#d8c49f;letter-spacing:.12em;margin-bottom:10px; }
.history-note p { font-size:11px;line-height:2;margin-bottom:8px; }
@media(min-width:781px) and (max-width:1100px) { nav{gap:14px;font-size:11px}.brand{font-size:20px}.history-person{grid-template-columns:35% 65%}.history-copy{border-width:36px;padding:0 6px}.history-frame{inset:-36px}.history-copy h3{font-size:34px}.history-tabs button{font-size:16px}.history-tabs button span{margin-right:9px} }
@media(max-width:780px) {
 .history-tabs{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.history-tabs button{font-size:16px;padding:13px 8px}.history-tabs button span{margin-right:9px}
 .history-person{grid-template-columns:1fr;min-height:0}.history-portrait{height:390px;border-right:1px solid #b5a07770;border-bottom:0}.history-portrait>img{height:400px;width:100%;object-position:center top}.portrait-symbol{font-size:180px;right:22px}.portrait-label{bottom:13px}
 .history-copy{border-width:28px;padding:8px 2px 10px}.history-frame{inset:-28px}.history-role{font-size:10px;letter-spacing:.04em;margin-bottom:30px}.history-copy h3{font-size:32px;letter-spacing:.06em}.history-copy rt{font-size:10px}.history-lead{font-size:18px}.history-copy dd{font-size:14px}.history-source{font-size:10px}.history-note{padding-left:15px;margin-top:25px}
}