.home-market {
  --market-plot-gold: var(--palette-8);
  --market-retail: var(--palette-4);
  --market-panel: color-mix(in srgb, var(--palette-2), transparent 18%);
  isolation: isolate;
  min-height: min(58rem, 92vh);
  overflow: clip;
  color: var(--palette-4);
  background:
    radial-gradient(75% 88% at 8% 50%, color-mix(in srgb, var(--palette-8), transparent 92%), transparent 66%),
    linear-gradient(112deg, var(--palette-1) 0%, var(--palette-1) 48%, var(--palette-3) 100%);
}

.home-market::before,
.home-market::after {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--palette-8), transparent 62%), transparent);
  content: "";
  pointer-events: none;
}

.home-market::before { top: 0; }
.home-market::after { bottom: 0; }

.home-market__media {
  position: absolute;
  z-index: 0;
  inset: 0 22% 0 0;
  overflow: hidden;
  pointer-events: none;
}

.home-market__media-image {
  position: absolute;
  inset: -12% -5%;
  background:
    image-set(
      url("../../images/market/market-editorial-v2-960w.webp") 1x,
      url("../../images/market/market-editorial-v2-1440w.webp") 1.5x,
      url("../../images/market/market-editorial-v2.webp") 2x
    ),
    var(--palette-2);
  background-position: 44% center;
  background-size: cover;
  transform: translate3d(0, var(--market-parallax-y, 0), 0) scale(1.06);
  will-change: transform;
}

.home-market__media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(22, 23, 26, .52), rgba(22, 23, 26, .52)),
    linear-gradient(90deg, transparent 0%, rgba(37, 37, 40, .16) 55%, #252528 100%);
}

.home-market__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
  align-items: center;
  gap: clamp(3rem, 5vw, 6.5rem);
}

.home-market__chart-column,
.home-market__copy {
  min-width: 0;
}

.home-market__chart-column {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.home-market__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}

.home-market__periods {
  display: inline-flex;
  gap: .24rem;
  padding: .28rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--palette-accent-soft), transparent 62%);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--palette-surface), transparent 16%);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--palette-accent), transparent 88%);
  backdrop-filter: blur(14px);
}

.home-market__period {
  min-height: 2.4rem;
  padding: .56rem 1rem;
  color: var(--palette-5);
  border: 0;
  border-radius: max(0px, calc(var(--radius-control) - .2rem));
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 650;
  cursor: pointer;
  transition:
    color var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}

.home-market__period:hover {
  color: var(--palette-9);
  background: color-mix(in srgb, var(--palette-4), transparent 92%);
}

.home-market__period:active { transform: translateY(1px); }

.home-market__period:focus-visible {
  outline: 2px solid var(--palette-8);
  outline-offset: 2px;
}

.home-market__period.is-active {
  color: var(--palette-3);
  background: linear-gradient(130deg, var(--palette-8), var(--palette-7));
}

.home-market__period.is-active:hover { color: var(--palette-3); }

.home-market__period[disabled] {
  opacity: .55;
  cursor: wait;
}

.home-market__unit {
  color: var(--palette-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-market .market-chart {
  position: relative;
  min-height: clamp(24rem, 31vw, 31rem);
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--palette-4), transparent 82%);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--palette-2), transparent 25%), color-mix(in srgb, var(--palette-3), transparent 38%));
  box-shadow: 0 2rem 5rem rgba(10, 10, 12, .26);
  backdrop-filter: blur(13px);
}

.home-market .market-chart::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 0%, rgba(221, 189, 120, .1), transparent 40%);
  content: "";
  pointer-events: none;
}

.home-market .market-chart__legend {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  color: var(--palette-5);
  font-size: var(--text-xs);
  font-weight: 550;
}

.home-market .market-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.home-market .market-chart__swatch {
  display: block;
  width: 1.8rem;
  height: 2px;
  background: var(--market-plot-gold);
}

.home-market .market-chart__swatch--spot {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--market-retail) 0 5px, transparent 5px 9px);
}

.home-market .market-chart__canvas-wrap {
  position: absolute;
  inset: 3.35rem 0 .35rem .6rem;
  cursor: crosshair;
}

.home-market .market-chart__canvas {
  width: 100% !important;
  height: 100% !important;
}

.home-market[data-loading="true"] .market-chart__canvas { opacity: .7; }

.home-market .market-chart__empty {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  color: var(--palette-5);
  place-items: center;
}

.home-market .market-chart__empty[hidden] {
  display: none;
}

.home-market__chart-note {
  max-width: 66ch;
  margin: var(--space-sm) 0 0;
  color: var(--palette-6);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.home-market__copy {
  display: grid;
  align-content: center;
  justify-items: start;
}

.home-market__copy h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--palette-9);
  font-size: var(--text-h2);
  letter-spacing: -.055em;
}

.home-market__copy h2 em {
  color: var(--palette-8);
  font-family: var(--font-serif);
  font-size: 1.1em;
  font-weight: 500;
  letter-spacing: -.02em;
}

.home-market__lead {
  max-width: 47ch;
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--palette-5);
  line-height: var(--leading-body);
}

.home-market__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--palette-4), transparent 80%);
}

.home-market__value {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--palette-4), transparent 84%);
}

.home-market__value:nth-child(odd) {
  padding-right: var(--space-md);
  border-right: 1px solid color-mix(in srgb, var(--palette-4), transparent 84%);
}

.home-market__value:nth-child(even) { padding-left: var(--space-md); }

.home-market__value dt {
  color: var(--palette-6);
  font-size: var(--text-xs);
  font-weight: 600;
}

.home-market__value dd {
  margin: .28rem 0 0;
  color: var(--palette-9);
  font-size: clamp(1.3rem, 1rem + .8vw, 1.9rem);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.15;
}

.home-market__value--primary dd { color: var(--palette-8); }

.home-market__value dd small {
  font-size: .48em;
  font-weight: 650;
  letter-spacing: .02em;
}

.home-market__value > span {
  min-height: 1.25em;
  margin-top: .38rem;
  color: var(--palette-6);
  font-size: .68rem;
}

.home-market__value > span.is-positive { color: var(--palette-8); }
.home-market__value > span.is-negative { color: var(--palette-5); }

.home-market__updated {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: var(--space-md) 0;
  color: var(--palette-6);
  font-size: .7rem;
}

.home-market__live-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--palette-8);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--palette-8), transparent 88%);
}

.home-market__cta { margin-top: .2rem; }

@media (max-width: 72rem) {
  .home-market { min-height: 0; }
  .home-market__inner {
    grid-template-columns: minmax(0, 1.18fr) minmax(19rem, .82fr);
    gap: clamp(2.2rem, 4vw, 3.5rem);
  }
  .home-market .market-chart { min-height: 24rem; }
}

@media (max-width: 58rem) {
  .home-market__media { inset: 42% 0 0; opacity: .52; }
  .home-market__media-image { inset: -18% -5%; }
  .home-market__media-shade {
    background: linear-gradient(180deg, #252528 0%, rgba(37, 37, 40, .72) 35%, rgba(27, 28, 31, .66) 100%);
  }
  .home-market__inner { grid-template-columns: 1fr; }
  .home-market__copy { order: -1; }
  .home-market__copy h2 { max-width: 17ch; }
  .home-market__lead { max-width: 58ch; }
  .home-market__values { max-width: 42rem; }
}

@media (max-width: 38rem) {
  .home-market__toolbar { align-items: flex-end; flex-wrap: wrap; }
  .home-market__unit { margin-inline-start: auto; font-size: .62rem; }
  .home-market__period { padding-inline: .8rem; }
  .home-market .market-chart { min-height: 21rem; padding-inline: .65rem; border-radius: var(--radius-card); }
  .home-market .market-chart__canvas-wrap { inset-inline: .15rem; }
  .home-market .market-chart__legend { padding-inline: .45rem; }
  .home-market__values { grid-template-columns: 1fr; }
  .home-market__value,
  .home-market__value:nth-child(odd),
  .home-market__value:nth-child(even) {
    grid-column: 1;
    padding-inline: 0;
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-market__media-image { transform: none; will-change: auto; }
}