/* Información page; shares the crimson, antique gold and charcoal palette of theme.css. */
body.info-body main.info-container { max-width: 1120px; padding: 0 0 20px; background: none; border: 0; box-shadow: none; }
.info-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 330px; padding: 40px; border: 1px solid var(--line); border-top: 2px solid #8d553c; background: linear-gradient(90deg, #0b0809 18%, #0b0809d0 46%, #0b080900 75%), url('/img/brand/info-banner.webp') right center / cover; overflow: hidden; }
.info-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, #0b0809e6); pointer-events: none; }
.info-hero-copy { position: relative; z-index: 1; max-width: 520px; }
.info-hero h2 { font: 46px/1.1 Georgia, serif; letter-spacing: -.02em; text-align: left; text-transform: none; color: #f2d9b8; margin: 16px 0 14px; }
.info-hero p { color: #c5aba0; font-size: 13px; line-height: 1.85; margin: 0; }
.info-headline { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 34px 0 0; background: linear-gradient(var(--line), var(--line)), #120c0d; border: 1px solid var(--line); }
.info-headline > div { min-width: 0; padding: 14px 16px; background: #120c0d; }
.info-headline dt { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #a58b78; }
.info-headline dd { margin: 6px 0 0; font: 21px Georgia, serif; color: #e6c391; }

.info-toc { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; padding: 14px 16px; margin: 0 0 8px; border: 1px solid var(--line); border-top: 0; background: #0f0a0bf2; }
.info-toc a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #b8a092; }
.info-toc a:hover { color: #ed6557; }
.info-error { padding: 14px 18px; border-left: 2px solid var(--red); background: #230d14c9; color: #efb0a1; font-size: 12px; }

.info-section { margin: 42px 0; scroll-margin-top: 70px; }
.info-heading { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 22px; }
.info-heading h3 { font: 30px Georgia, serif; color: #e1c9ad; margin: 6px 0 0; }
.info-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid var(--line); background: #ad64350b; color: var(--primary); font: 17px Georgia, serif; letter-spacing: .05em; }
.info-lead { max-width: 760px; color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0 0 20px; }

.info-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.info-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 24px; border: 1px solid var(--line); background: linear-gradient(135deg, #251917, #140e10); }
.info-tile > span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #b78960; font-weight: bold; }
.info-tile strong { font: 38px/1.1 Georgia, serif; color: #f0dbbc; font-variant-numeric: tabular-nums; }
.info-tile small { color: #a8968b; font-size: 11px; line-height: 1.7; }
.info-tile.is-main { border-top: 2px solid var(--red); background: linear-gradient(135deg, #3a1619, #170d10); }
.info-tile.is-main strong { color: #ff8a7a; text-shadow: 0 0 24px #bd4a3e66; }

.info-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #120c0dcc; }
.info-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.info-table th { padding: 12px 14px; text-align: left; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #b78960; background: #1b1010; border-bottom: 1px solid var(--line); white-space: nowrap; }
.info-table td { padding: 11px 14px; color: #d0bfb2; border-bottom: 1px solid #c1976e14; line-height: 1.6; vertical-align: top; }
.info-table tr:last-child td { border-bottom: 0; }
.info-table tbody tr:hover td { background: #ffffff05; }
.info-table td.info-value { color: #e6c391; font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-table small { color: #9a897b; }
.info-table.compact td, .info-table.compact th { padding: 9px 12px; }

.info-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; padding: 0; margin: 20px 0 0; list-style: none; }
.info-facts li { position: relative; padding-left: 18px; color: #b9a598; font-size: 12px; line-height: 1.75; }
.info-facts li::before { content: "◆"; position: absolute; left: 0; top: 1px; color: var(--red); font-size: 9px; }
.info-facts b { color: #e1c9ad; font-weight: 600; }

.info-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.info-card { min-width: 0; padding: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, #2b1b17, var(--surface)); }
.info-card h4 { font: 20px Georgia, serif; color: #e1c9ad; margin: 0 0 16px; }
.info-list { margin: 0; }
.info-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid #c1976e14; font-size: 12px; }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { color: #a8968b; }
.info-list dd { margin: 0; color: #e6c391; text-align: right; }
.info-note { margin: 16px 0 0; color: #8e7f75; font-size: 11px; line-height: 1.7; }
.info-note a, .info-list a { color: #dcb784; }
.info-body code { padding: 1px 6px; border: 1px solid #70543f66; background: #0c0909b3; color: #f0d2a6; font: 11px "Liberation Mono", Consolas, monospace; }

.info-jewels { position: relative; isolation: isolate; padding: 30px; border: 1px solid var(--line); border-top: 2px solid var(--red); }
.info-jewels::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0b0809d9, #0b0809 520px), linear-gradient(90deg, #0b0809 30%, #0b080900), url('/img/brand/info-jewels.webp') right top / 100% auto no-repeat; }
.jewel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jewel-card { --gem: #cfd8e8; min-width: 0; overflow: hidden; padding: 20px 18px; border: 1px solid var(--line); background: #140d0ee6; backdrop-filter: blur(2px); }
.jewel-card.soul { --gem: #b07cff; }
.jewel-card.life { --gem: #4fd39a; }
.jewel-card.chaos { --gem: #f2c14e; }
.jewel-card.devil { --gem: #ff5a46; }
.jewel-gem { display: block; width: 26px; height: 26px; margin-bottom: 14px; transform: rotate(45deg); border: 1px solid var(--gem); background: radial-gradient(circle at 30% 30%, #fff8, transparent 55%), color-mix(in srgb, var(--gem) 55%, #0b0809); box-shadow: 0 0 18px color-mix(in srgb, var(--gem) 60%, transparent); }
.jewel-card h4 { font: 16px Georgia, serif; color: #e1c9ad; margin: 0 0 6px; }
.jewel-card strong { display: block; font: clamp(20px, 2.2vw, 26px)/1.15 Georgia, serif; color: var(--gem); margin-bottom: 10px; overflow-wrap: anywhere; }
.jewel-card strong small { font-size: 13px; color: #b09c90; }
.jewel-card ul { padding: 0; margin: 0; list-style: none; }
.jewel-card li { color: #b09c90; font-size: 11px; line-height: 1.6; padding: 4px 0; border-top: 1px solid #c1976e10; }


@media (max-width: 1080px) {
    .info-headline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .info-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jewel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    body.info-body main.info-container { width: calc(100% - 32px); }
    .info-hero { padding: 28px 20px; min-height: 0; background-position: 70% center; }
    .info-hero h2 { font-size: 34px; }
    .info-headline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-headline dd { font-size: 18px; }
    .info-toc { position: static; gap: 8px 18px; }
    .info-tiles, .info-split, .info-facts { grid-template-columns: minmax(0, 1fr); }
    .info-tile strong { font-size: 32px; }
    .info-jewels { padding: 20px 16px; }
    .info-list > div { flex-direction: column; gap: 4px; }
    .info-list dd { text-align: left; }
}