/* Models page (models.html) */

/* Hero */
.hero { background: var(--white); padding: 56px 0 104px; }
.hero h1 { font-size: clamp(46px, 6vw, 80px); line-height: .96; font-weight: 800; font-stretch: 82%; letter-spacing: -.02em; color: var(--violet-900); margin: 0 0 28px; }
.hero .sub { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: var(--text); margin: 0; max-width: 34em; }

/* Model list */
.models { padding: 24px 0 120px; }
.models .section-h { margin-bottom: 32px; }
.model-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--violet-500); }
.model { display: grid; grid-template-columns: 4fr 6fr 3fr 3fr; column-gap: 40px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.model .name { font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--violet-900); margin: 0; white-space: nowrap; }
.model .name span { color: var(--violet-500); }
.model h3 { font-size: 20px; font-weight: 600; color: var(--violet-900); margin: 0; }
.model div p { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
.status { font-size: 15px; color: var(--text); white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; box-sizing: border-box; }
.status.live::before { background: var(--violet-500); }
.status.soon::before { border: 1.5px solid var(--violet-500); }
.model .action { justify-self: end; font-size: 15px; font-weight: 500; color: var(--violet-500); text-underline-offset: 4px; white-space: nowrap; }
.model .action:hover { color: var(--violet-900); }
/* The open slot: a model that doesn't exist yet */
.model.open .name b { color: var(--violet-500); font-weight: 700; letter-spacing: .04em; }
.api-note { margin: 32px 0 0; font-size: 16px; color: var(--muted); }

/* Responsive */
@media (max-width: 1000px) {
  .model { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .model .name, .model > h3, .model > div { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .hero { padding-bottom: 72px; }
  .models { padding: 8px 0 88px; }
}
@media (max-width: 600px) {
  .model { grid-template-columns: 1fr; }
  .model .action { justify-self: start; }
}