.head-to-head-page { background: #f5f1e8; }
.head-to-head-hero { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: 1.5rem; }
.head-to-head-hero h1 { margin: .2rem 0 .6rem; font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: .95; }
.head-to-head-hero > p:last-child { max-width: 47rem; font-size: 1.08rem; }
.head-to-head-picker, .head-to-head-results { padding-bottom: clamp(3rem, 6vw, 5rem); }
.head-to-head-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.2rem; }
.head-to-head-section-heading h2 { margin: .1rem 0 0; }
.head-to-head-next { margin: 0; padding: .65rem .9rem; color: #fff; background: #071b35; border-radius: .25rem; font-size: .88rem; letter-spacing: .04em; white-space: nowrap; }
.head-to-head-next strong { color: #e0b44f; }
.head-to-head-rosters { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: .8rem; }
.head-to-head-roster { background: #fff; border: 1px solid #c8c1b3; border-radius: .25rem; box-shadow: 0 7px 22px rgb(7 27 53 / .06); }
.head-to-head-roster[open] { border-color: #9a7627; }
.head-to-head-roster summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; cursor: pointer; font-weight: 800; color: #071b35; }
.head-to-head-roster summary small { color: #6a6358; font-weight: 600; }
.head-to-head-roster__list { max-height: 25rem; overflow-y: auto; border-top: 1px solid #e2ddd2; }
.head-to-head-option { width: 100%; display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .75rem; padding: .72rem 1rem; border: 0; border-bottom: 1px solid #eee9df; background: #fff; color: #071b35; text-align: left; cursor: pointer; }
.head-to-head-option:hover { background: #faf6ed; }
.head-to-head-option[aria-pressed="true"] { background: #fff7db; box-shadow: inset 4px 0 #b1882f; }
.head-to-head-option:disabled { opacity: .48; cursor: not-allowed; }
.head-to-head-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #071b35; color: #fff; font-weight: 850; letter-spacing: .03em; }
.head-to-head-option__name { display: block; font-weight: 800; }
.head-to-head-option__office { display: block; margin-top: .1rem; color: #6a6358; font-size: .78rem; }
.head-to-head-option__score { font-weight: 850; color: #8a681e; }
.head-to-head-option__score small { display: block; color: #6a6358; font-weight: 600; font-size: .68rem; }
.head-to-head-results { padding-top: 2.5rem; border-top: 1px solid #c8c1b3; }
.head-to-head-share { color: #071b35; border-color: #071b35; }
.head-to-head-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 1rem; }
.head-to-head-profile { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem; background: #fff; border: 1px solid #d5cec0; }
.head-to-head-profile--edge { border-color: #a77b1e; box-shadow: inset 0 4px #c79a36; }
.head-to-head-profile .head-to-head-avatar { width: 4.5rem; height: 4.5rem; font-size: 1.35rem; }
.head-to-head-profile h3 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
.head-to-head-profile p { margin: .25rem 0 .45rem; color: #5e584e; }
.head-to-head-profile__score { text-align: right; }
.head-to-head-profile__score strong { display: block; color: #8a681e; font: 850 clamp(2rem, 4vw, 3.4rem)/1 serif; }
.head-to-head-profile__score span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.head-to-head-vs { align-self: center; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #fff; background: #071b35; font-weight: 900; }
.head-to-head-edge { margin: 1rem 0; padding: 1.1rem; text-align: center; color: #fff; background: #071b35; }
.head-to-head-edge strong { color: #e0b44f; }
.head-to-head-category-list { display: grid; gap: .65rem; }
.head-to-head-category { background: #fff; border: 1px solid #d5cec0; }
.head-to-head-category summary { cursor: pointer; list-style: none; }
.head-to-head-category summary::-webkit-details-marker { display: none; }
.head-to-head-category__row { display: grid; grid-template-columns: 1fr minmax(10rem, 1.25fr) 1fr; align-items: center; gap: 1rem; padding: 1rem; text-align: center; }
.head-to-head-category__score { padding: .65rem; background: #f4f0e7; }
.head-to-head-category__score strong { display: block; color: #071b35; font-size: 1.6rem; }
.head-to-head-category__score--edge { background: #fff2c4; outline: 2px solid #b1882f; }
.head-to-head-category__name strong, .head-to-head-category__name span { display: block; }
.head-to-head-category__name span { margin-top: .25rem; color: #7a5c1e; font-size: .78rem; font-weight: 800; }
.head-to-head-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; border-top: 1px solid #ddd6c9; background: #faf8f3; }
.head-to-head-evidence h4 { margin: 0 0 .7rem; }
.head-to-head-evidence article { padding: .7rem 0; border-top: 1px solid #ddd6c9; }
.head-to-head-evidence article h5 { margin: 0 0 .25rem; font-size: .98rem; }
.head-to-head-evidence article p { margin: .2rem 0; font-size: .86rem; }
.head-to-head-empty { padding: 1rem; color: #625b50; background: #fff; border: 1px dashed #aaa193; }
.head-to-head-loading { min-height: 12rem; display: grid; place-items: center; color: #625b50; background: #fff; border: 1px solid #d5cec0; }
.head-to-head-error { padding: 1rem; border-left: 4px solid #a13b2f; background: #fff; color: #6e211a; }
.head-to-head-option:focus-visible, .head-to-head-roster summary:focus-visible, .head-to-head-share:focus-visible, .head-to-head-category summary:focus-visible { outline: 3px solid #c89524; outline-offset: 3px; }
@media (max-width: 760px) {
  .head-to-head-section-heading { align-items: stretch; flex-direction: column; }
  .head-to-head-next { align-self: flex-start; }
  .head-to-head-rosters { grid-template-columns: 1fr; }
  .head-to-head-roster[open] { width: 100%; }
  .head-to-head-matchup { grid-template-columns: 1fr; }
  .head-to-head-vs { margin: -.2rem auto; }
  .head-to-head-profile { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .head-to-head-profile .head-to-head-avatar { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
  .head-to-head-profile__score { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: .7rem; border-top: 1px solid #eee8dc; text-align: left; }
  .head-to-head-category__row { grid-template-columns: 1fr 1fr; }
  .head-to-head-category__name { grid-column: 1 / -1; grid-row: 1; }
  .head-to-head-evidence { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .head-to-head-page * { scroll-behavior: auto !important; transition: none !important; } }