/* Separate comparison page. Shared homepage/artwork styles remain unchanged. */
.comparison-site { background: #111318; color: #e8ebef; }
.comparison-site main:focus { outline: none; }
.comparison-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid #30343b; background: #17191e; }
.comparison-header__inner { display: flex; align-items: center; gap: 36px; min-height: 84px; max-width: 1460px; margin: auto; padding: 12px 40px; }
.comparison-brand { display: flex; align-items: center; gap: 14px; }
.comparison-brand__copy { display: grid; gap: 7px; }
.comparison-brand__copy small { color: #9299a4; font: 400 7px/1 var(--display); letter-spacing: .19em; }
.comparison-nav { display: flex; gap: 28px; margin-left: auto; }
.comparison-nav a { position: relative; display: grid; align-items: center; min-height: 48px; color: #a9b0bd; font: 500 12px/1.4 var(--display); letter-spacing: .04em; }
.comparison-nav a[aria-current] { color: #f1ece6; }
.comparison-nav a[aria-current]::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #b58168; }
.comparison-home { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 20px; border: 1px solid #46434a; border-radius: 3px; color: #dddfe5; font: 400 11px/1 var(--display); letter-spacing: .07em; }
.comparison-home span { color: var(--ui-copper); font-size: 18px; }
.comparison-main { width: min(100%, 1400px); margin: auto; padding: 0 40px; }
.comparison-breadcrumb { display: flex; gap: 14px; margin: 30px 0 0; color: #929cae; font-size: 11px; }
.comparison-breadcrumb a { color: #b8c0cb; }
.comparison-breadcrumb > span[aria-hidden] { color: #646a78; }
.comparison-intro { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 64px; padding: 36px 0 44px; }
.comparison-eyebrow { margin: 0 0 12px; color: #a6afbd; font: 400 10px/1.5 var(--display); letter-spacing: .16em; }
.comparison-intro h1 { margin: 0; font: 500 clamp(40px, 4.6vw, 68px)/1.14 var(--display); letter-spacing: .035em; }
.comparison-intro h1 span { color: #aeb3c0; }
.comparison-intro__copy > p { margin: 20px 0; max-width: 44ch; color: #afb8c7; font-size: 14px; line-height: 1.8; }
.comparison-crests { display: flex; align-items: center; gap: 28px; }
.comparison-crests .race-emblem { width: 30px; height: 30px; filter: none; opacity: .75; }
.comparison-text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font: 400 11px/1.5 var(--display); letter-spacing: .08em; color: #d1b4a6; }
.comparison-text-link span { font-size: 17px; }
.comparison-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.comparison-race--bellato { --accent-rgb: 86, 169, 229; --dossier-backdrop: #191529; --comparison-scene: url("assets/faction-bellato-hq-v79.webp"); }
.comparison-race--cora { --accent-rgb: 160, 107, 220; --dossier-backdrop: #220f18; --comparison-scene: url("assets/faction-cora-hq-v79.webp"); }
.comparison-race--accretia { --accent-rgb: 224, 180, 94; --dossier-backdrop: #231c14; --comparison-scene: url("assets/faction-accretia-hq-v79.webp"); }
.comparison-race { min-width: 0; overflow: hidden; border: 1px solid #30363e; border-top: 1px solid rgba(var(--accent-rgb), .8); background: #15191f; }
.comparison-race__art { position: relative; isolation: isolate; height: clamp(180px, 18vw, 260px); overflow: hidden; background: #11171b; }
.comparison-race__scene { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #15191f, #0b10166b 55%), var(--comparison-scene) center / cover; }
.comparison-race__art img { display: block; width: 100%; height: 100%; padding: 30px 10px 10px; object-fit: contain; }
.comparison-race__art > .race-emblem { position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; filter: none; }
.comparison-race__number { position: absolute; top: 16px; right: 14px; color: #bbc5d1; font: 400 9px/1.5 var(--display); letter-spacing: .06em; }
.comparison-race__copy { padding: 18px 22px 6px; }
.comparison-race__copy .comparison-eyebrow { margin-bottom: 6px; color: rgb(var(--accent-rgb)); font-size: 9px; }
.comparison-race__copy h2 { margin: 0; color: rgb(var(--accent-rgb)); font: 500 28px/1.25 var(--display); letter-spacing: .06em; }
.comparison-race__copy > p:not(.comparison-eyebrow) { min-height: 40px; margin: 10px 0; color: #b5bdc9; font-size: 12px; line-height: 1.65; }
.comparison-race__copy > a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-top: 1px solid #30363e; font: 400 11px/1.5 var(--display); letter-spacing: .08em; }
.comparison-race__copy > a span { color: rgb(var(--accent-rgb)); font-size: 18px; }
.comparison-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin: 0 0 28px; }
.comparison-section-heading h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.3 var(--display); letter-spacing: .05em; }
.comparison-section-heading > p { margin: 0; max-width: 42ch; color: #a7b0bf; font-size: 12px; line-height: 1.75; }
.comparison-matrix { padding: 76px 0 0; }
.comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comparison-table th, .comparison-table td { text-align: left; vertical-align: top; padding: 22px 24px; border-bottom: 1px solid #30353d; }
.comparison-table thead th { width: 27%; padding-top: 18px; padding-bottom: 18px; background: #191c23; font: 500 15px/1.5 var(--display); letter-spacing: .06em; }
.comparison-table thead td { width: 19%; background: #191c23; }
.comparison-table tbody th { color: #aab3c1; font: 400 11px/1.6 var(--display); letter-spacing: .07em; }
.comparison-table tbody td { border-left: 1px solid #272c34; }
.comparison-table strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.6; }
.comparison-table td > span { display: block; margin-top: 8px; color: #9faab9; font-size: 12px; line-height: 1.75; }
.comparison-tone--bellato { color: #66b5e9; }
.comparison-tone--cora { color: #b18bde; }
.comparison-tone--accretia { color: #d4b168; }
.comparison-details { padding: 80px 0 0; }
.comparison-detail-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.comparison-detail-nav a { display: grid; place-items: center; min-height: 44px; color: #b5becc; font: 400 11px/1.5 var(--display); letter-spacing: .07em; }
.comparison-dossier { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin-top: 28px; border: 1px solid #30343c; background: #171b22; }
.comparison-dossier .dossier-visual { height: 100%; min-height: 520px; background: var(--dossier-backdrop); }
.comparison-dossier__copy { padding: 38px 42px; }
.comparison-dossier__copy > .comparison-eyebrow { color: rgb(var(--accent-rgb)); }
.comparison-dossier__copy h2 { margin: 0 0 16px; font: 500 40px/1.3 var(--display); letter-spacing: .06em; }
.comparison-dossier__copy > p:not(.comparison-eyebrow) { margin: 0; color: #b1bbc9; font-size: 14px; line-height: 1.85; }
.comparison-dossier__copy h3 { margin: 28px 0 0; color: rgb(var(--accent-rgb)); font: 400 11px/1.6 var(--display); letter-spacing: .08em; }
.comparison-dossier__copy ul { list-style: none; padding: 0; margin: 14px 0 12px; }
.comparison-dossier__copy li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid #303640; }
.comparison-dossier__copy li strong { font: 400 13px/1.65 var(--display); letter-spacing: .035em; }
.comparison-dossier__copy li span { color: #a9b4c3; font-size: 12px; line-height: 1.8; }
.comparison-return { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 48px 0; margin-top: 24px; }
.comparison-return > span { color: #9aa5b4; font: 400 11px/1.5 var(--display); letter-spacing: .12em; }
.comparison-return a { display: flex; gap: 30px; align-items: center; min-height: 52px; padding: 12px 22px; border: 1px solid var(--ui-button-line); border-radius: 3px; background: var(--ui-button-bg); font: 400 12px/1.5 var(--display); letter-spacing: .06em; }
.comparison-return a span { color: var(--ui-copper); font-size: 18px; }
.comparison-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1320px; min-height: 80px; margin: auto; border-top: 1px solid #30353d; color: #99a4b5; font: 400 10px/1.5 var(--display); letter-spacing: .06em; }
.comparison-footer a { display: flex; gap: 20px; align-items: center; min-height: 48px; }
.comparison-site :where(a):hover { color: #f1ece6; }
.comparison-site :where(a):focus-visible { outline: 2px solid var(--ui-copper); outline-offset: 4px; }
.comparison-site :is(main[id], section[id], article[id]) { scroll-margin-top: 108px; }
@media (prefers-reduced-motion: no-preference) {
  .comparison-site a { transition: color 160ms ease, border-color 160ms ease; }
  .comparison-race:focus-within { border-color: rgba(var(--accent-rgb), .75); }
}
@media (max-width: 1100px) {
  .comparison-header__inner { gap: 24px; padding-inline: 28px; }
  .comparison-home { display: none; }
  .comparison-main { padding-inline: 28px; }
  .comparison-intro { gap: 32px; }
  .comparison-race__copy { padding-inline: 16px; }
  .comparison-table th, .comparison-table td { padding-inline: 16px; }
  .comparison-dossier__copy { padding: 28px; }
  .comparison-dossier__copy li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .comparison-footer { margin-inline: 28px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .comparison-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .comparison-crests { display: none; }
  .comparison-intro__copy > p { max-width: 60ch; margin-top: 0; }
}
@media (max-width: 700px) {
  .comparison-header__inner { min-height: 70px; padding: 8px 18px; gap: 18px; }
  .comparison-brand__copy { display: none; }
  .comparison-brand .brand__monogram { width: 36px; height: 36px; }
  .comparison-nav { flex: 1; justify-content: flex-end; gap: 22px; }
  .comparison-nav a { font-size: 11px; }
  .comparison-main { padding-inline: 18px; }
  .comparison-breadcrumb { margin-top: 24px; font-size: 10px; }
  .comparison-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 0 32px; }
  .comparison-intro h1 { font-size: clamp(36px, 8vw, 52px); }
  .comparison-crests { display: none; }
  .comparison-intro__copy > p { margin: 0 0 10px; font-size: 13px; }
  .comparison-roster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .comparison-race { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparison-race__art { height: 100%; min-height: 194px; }
  .comparison-race__art img { padding: 28px 4px 4px; }
  .comparison-race__art > .race-emblem { top: 10px; left: 10px; width: 22px; height: 22px; }
  .comparison-race__number { top: 12px; right: 8px; font-size: 8px; }
  .comparison-race__copy { display: flex; flex-direction: column; justify-content: center; padding: 18px 14px 4px; }
  .comparison-race__copy h2 { font-size: 24px; }
  .comparison-race__copy .comparison-eyebrow { font-size: 8px; letter-spacing: .08em; }
  .comparison-race__copy > p:not(.comparison-eyebrow) { min-height: 0; font-size: 11px; }
  .comparison-race__copy > a { margin-top: auto; font-size: 10px; }
  .comparison-matrix, .comparison-details { padding-top: 52px; }
  .comparison-section-heading { display: block; margin-bottom: 22px; }
  .comparison-section-heading > p { margin-top: 14px; font-size: 12px; }
  .comparison-table, .comparison-table thead, .comparison-table tbody { display: block; }
  .comparison-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comparison-table thead { position: sticky; z-index: 3; top: 70px; }
  .comparison-table thead td { display: none; }
  .comparison-table thead th { width: auto; padding: 14px 8px; font-size: 13px; text-align: center; border-top: 1px solid #30353d; }
  .comparison-table tbody th { grid-column: 1 / -1; padding: 18px 10px 10px; border-bottom: 0; background: #16191f; }
  .comparison-table tbody td { min-width: 0; padding: 14px 10px 22px; }
  .comparison-table tbody td:nth-child(2) { border-left: 0; }
  .comparison-table strong { font-size: 12px; overflow-wrap: anywhere; }
  .comparison-table td > span { font-size: 11px; line-height: 1.8; }
  .comparison-detail-nav { margin-top: 18px; gap: 24px; }
  .comparison-dossier { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .comparison-dossier .dossier-visual { min-height: 0; height: 300px; }
  .comparison-dossier__copy { padding: 28px 22px; }
  .comparison-dossier__copy h2 { font-size: 34px; }
  .comparison-dossier__copy > p:not(.comparison-eyebrow) { font-size: 13px; }
  .comparison-dossier__copy li strong { font-size: 14px; }
  .comparison-return { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 0; padding: 32px 0; }
  .comparison-return a { justify-content: space-between; }
  .comparison-footer { margin-inline: 18px; font-size: 9px; }
  .comparison-site :is(main[id], section[id], article[id]) { scroll-margin-top: 92px; }
}
@media (max-width: 360px) {
  .comparison-header__inner { gap: 14px; padding-inline: 14px; }
  .comparison-nav { gap: 16px; }
  .comparison-main { padding-inline: 14px; }
  .comparison-race { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .comparison-race__copy { padding-inline: 12px; }
  .comparison-race__copy h2 { font-size: 22px; }
  .comparison-race__number { display: none; }
  .comparison-table th, .comparison-table td { padding-inline: 7px; }
}