/* Homepage artwork only. Keep shared refined styles and other pages unchanged. */
.home-hero-art {
  --hero-ink: #071740;
  --hero-white: #fff;
  --hero-soft: #e3ecff;
  --hero-accent: #c3d8ff;
  display: block;
}
@layer refined-fixes {
  .home-hero.home-hero-art { padding: 0 !important; }
}
.home-banner {
  position: relative;
  isolation: isolate;
  background: var(--hero-ink);
  color: var(--hero-white);
}
.home-banner-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
  min-height: 460px;
  padding-block: var(--s10);
}
.home-artwork {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.home-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
}
.home-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent 32%, rgba(7, 23, 64, .38) 46%, rgba(7, 23, 64, .91) 61%, rgba(7, 23, 64, .94));
  pointer-events: none;
}
.home-hero-copy { grid-column: 2; min-width: 0; }
.home-hero-art h1 {
  color: var(--hero-white);
  font-size: clamp(2.3rem, 3.35vw, 3.25rem);
  line-height: 1.1;
}
.home-hero-art h1 span { color: var(--hero-accent); }
.home-hero-art .eyebrow { color: var(--hero-soft); }
.home-hero-art .intro { color: var(--hero-soft); line-height: 1.65; }
.home-hero-art .intro a {
  color: var(--hero-white);
  text-decoration-thickness: 1px;
}
.home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
}
.home-hero-art .button.primary {
  background: var(--hero-white);
  color: var(--hero-ink);
  border-color: var(--hero-white);
  margin: 0;
}
.home-hero-art .button.primary:hover { background: var(--hero-soft); }
.home-hero-art .hero-secondary { margin: 0; color: var(--hero-white); }
.home-banner :focus-visible { outline-color: var(--hero-white); }
.home-hero-support { padding-block: var(--s6); }
.home-shortlist { margin: 0; padding: var(--s5) var(--s6); }
.home-shortlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
.home-shortlist .shortlist-row {
  grid-template-columns: 20px 64px minmax(0, 1fr) auto;
  gap: var(--s2);
  padding-block: var(--s3);
}
.home-shortlist .shortlist-row > .rank { display: block; }
.home-shortlist .brand-plate { width: 64px; height: 44px; }
.home-shortlist .brand-plate img { width: 54px; height: 32px; }
.home-shortlist .shortlist-row strong { font-size: var(--sm); }
.home-shortlist .shortlist-row .score strong { font-size: var(--lg); }
.home-shortlist .shortlist-row .small { font-size: var(--xs); }
.home-shortlist > p { margin-top: var(--s1); }
.home-hero-support > .byline { margin-top: var(--s4); }
@media (min-width: 901px) and (max-width: 1200px) {
  .home-banner-inner { min-height: 420px; }
  .home-artwork img { object-position: left center; }
}
@media (min-width: 1800px) {
  .home-artwork { max-width: 1800px; margin-inline: auto; }
  .home-banner::after {
    background: linear-gradient(90deg, var(--hero-ink), transparent calc(50% - 680px), transparent 42%, rgba(7, 23, 64, .91) 61%, var(--hero-ink));
  }
}
@media (max-width: 1100px) {
  .home-shortlist-grid { gap: var(--s4); }
  .home-shortlist .shortlist-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .home-shortlist .shortlist-row > .rank { display: none; }
  .home-shortlist .brand-plate { width: 56px; }
  .home-shortlist .brand-plate img { width: 48px; }
}
@media (max-width: 900px) {
  .home-banner-inner {
    grid-template-columns: .9fr 1.1fr;
    min-height: 380px;
    gap: var(--s6);
    padding-block: var(--s8);
  }
  .home-artwork { position: static; grid-column: 1; grid-row: 1; z-index: auto; }
  .home-artwork img { height: auto; aspect-ratio: 624 / 485; object-fit: contain; }
  .home-banner::after { display: none; }
  .home-hero-art h1 { font-size: 2.15rem; }
  .home-hero-art .intro { margin-block: var(--s4) var(--s5); font-size: var(--sm); }
  .home-hero-actions { gap: var(--s2) var(--s4); }
}
@media (max-width: 700px) {
  .home-shortlist-grid { grid-template-columns: 1fr; gap: 0; }
  .home-shortlist .shortlist-row { grid-template-columns: 24px 70px minmax(0, 1fr) auto; }
  .home-shortlist .shortlist-row > .rank { display: block; }
  .home-shortlist .brand-plate { width: 70px; }
  .home-shortlist .brand-plate img { width: 60px; }
}
@media (max-width: 600px) {
  .home-banner-inner {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding-block: var(--s4) var(--s6);
    min-height: 0;
  }
  .home-artwork { width: 232px; height: 180px; }
  .home-artwork img { width: 100%; height: 100%; }
  .home-hero-copy { width: 100%; }
  .home-hero-art h1 { font-size: clamp(1.85rem, 8.4vw, 2.2rem); max-width: none; }
  .home-hero-art .eyebrow { margin-bottom: var(--s2); }
  .home-hero-art .intro { font-size: var(--base); margin-block: var(--s4); }
  .home-hero-actions { gap: var(--s2) var(--s4); }
  .home-hero-art .button.primary { min-height: 48px; }
  .home-hero-art .hero-secondary { min-height: 44px; }
  .home-shortlist { padding: var(--s4); }
  .home-hero-support { padding-block: var(--s5); }
}