/* Page layouts for the live site. Components and tokens live in tokens.css. */
.page { overflow-x: clip; padding: var(--s5) var(--gutter) var(--s8); max-width: 1440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.wordmark:hover { color: var(--accent); }

/* home */
.home-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s7); margin-top: var(--s8); align-items: start; }
.lead-card { display: block; margin-top: 40px; }
.lead-card .media { margin-bottom: var(--s4); }
.lead-card .who { display: flex; align-items: center; gap: 10px; font: 600 18px/1.2 var(--font); letter-spacing: -0.01em; }
.lead-card .who .v { margin-left: auto; color: var(--accent); font-size: 22px; letter-spacing: -0.02em; }
.lead-card .meta { margin-top: 10px; }
.lead-card:hover .who { color: var(--text); }
.foot-note { margin-top: auto; padding-top: var(--s8); }
@media (max-width: 1000px) {
  .home-body { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s7); }
  .lead-card { max-width: 520px; margin-top: 0; }
}
@media (max-width: 640px) {
  .chart { --plot: 300px; }
  .top { gap: var(--s4); }
}

/* score page */
.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s7); align-items: end; margin-top: var(--s8); }
.back { font: var(--t-ui); color: var(--text-3); }
.back:hover { color: var(--text); }
.detail .who { display: flex; align-items: center; gap: 12px; font: var(--t-title); letter-spacing: -0.02em; }
.detail .who .logo { width: 26px; height: 26px; }
.detail .test { color: var(--text-2); font: 400 20px/1.3 var(--font); margin-top: 6px; }
.detail .score { font: var(--t-hero); letter-spacing: -0.06em; margin: var(--s6) 0 var(--s5); }
.detail .score small { font: 400 0.2em/1 var(--font); letter-spacing: 0; color: var(--text-3); margin-left: 0.2em; }
.detail .summary { color: var(--text-2); max-width: 540px; font-size: 18px; }
.detail .meta { margin-top: var(--s5); }
.detail .meta a:hover { color: var(--text); }
.detail .revised { margin-top: var(--s2); color: var(--text-2); }
.media .empty { position: absolute; inset: 0; display: grid; place-items: center; font: var(--t-meta); color: var(--text-3); }
.more { display: flex; gap: var(--s5); margin-top: var(--s8); flex-wrap: wrap; }
.more a { font: var(--t-ui); color: var(--text-3); display: inline-flex; gap: 10px; align-items: baseline; }
.more a b { font-weight: 600; color: var(--text); }
.more a:hover, .more a:hover b { color: var(--accent); }
@media (max-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); }
}

/* page enter */
.page > * { animation: rise 600ms var(--ease) both; }
.page > *:nth-child(2) { animation-delay: 60ms; }
.page > *:nth-child(3) { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .page > * { animation: none; } .col .bar { transition: none; } }