/* Search landing pages: style pages and frames page. Builds on base.css and style.css tokens. */
.lp .header { position: sticky; top: 0; }
.lp-hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)) clamp(var(--space-8), 4vw, var(--space-12)); }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.lp-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl, clamp(2.2rem, 4vw, 3.4rem)); line-height: 1.04; letter-spacing: -0.015em; max-width: 18ch; }
.lp-lede { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--text-base); max-width: 52ch; }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.lp-fine { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.lp-hero__art { margin: 0; }
.lp-hero__art img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 30px 50px -24px rgba(40, 28, 12, 0.55); }
.lp-hero__art figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.crumbs { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.lp-body { padding-top: var(--space-6); }
.lp-h2 { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); margin-bottom: var(--space-6); }
.lp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-6); }
.lp-cols h3 { font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-2); }
.lp-cols p { color: var(--color-text-muted); font-size: var(--text-sm); }
.lp-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-4); }
.lp-other { display: grid; gap: var(--space-2); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.lp-other img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); transition: transform 200ms ease; }
.lp-other:hover img { transform: translateY(-2px); }
.lp-cta { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface-2); }
.lp-cta p { font-family: var(--font-display); font-size: var(--text-lg); }
.table-wrap { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lp-table th, .lp-table td { text-align: left; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.lp-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.lp-table tbody th { font-weight: 600; white-space: nowrap; }
.lp-table td { color: var(--color-text-muted); }
.lp-table .num { white-space: nowrap; color: var(--color-text); font-variant-numeric: tabular-nums; }
.lp-hero--plain .lp-title { max-width: 22ch; }
.lp .footer__links + .footer__links { margin-top: var(--space-3); }
@media (max-width: 860px) {
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-hero__art { order: -1; max-width: 520px; }
  .lp-cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .lp .nav { display: none; }
  .lp-table thead { display: none; }
  .lp-table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); }
  .lp-table th, .lp-table td { border: 0; padding: 0; }
  .lp-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .lp-table td:nth-child(4) { grid-column: 1 / -1; font-size: var(--text-xs); }
}
.style-card .link-btn--quiet { color: var(--color-text-muted); margin-top: var(--space-1); }