/* Gallery-specific components. Tokens only (no colour literals): checked by tools/check-tokens.mjs. */
.brand .brand-logo { width: 32px; height: 32px; border-radius: var(--radius-full); flex: none; display: block; }
.site-footer .brand .brand-logo { width: 24px; height: 24px; }
.btn.primary:hover { background-color: var(--color-accent-hover); }
.btn.primary:active { background-color: var(--color-accent-pressed); }
.brand .wordmark { font-weight: var(--font-weight-bold); }
.brand .wordmark .prompt { font-family: var(--font-family-code); color: var(--color-accent); font-weight: var(--font-weight-bold); margin-inline-end: var(--spacing-1); letter-spacing: 0; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-1); margin: 0 auto var(--spacing-6); max-width: 46em; }
.jump .chip { text-decoration: none; cursor: pointer; }
.jump .chip b { color: var(--color-accent); font-family: var(--font-family-code); }
.style-grid { display: grid; gap: var(--spacing-4); grid-template-columns: 1fr; }
.style-card { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-3); border: var(--card-border); border-radius: var(--card-radius); background: var(--color-background-card); scroll-margin-top: calc(var(--layout-top-nav-height) + var(--spacing-2)); transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.style-card:hover { box-shadow: var(--shadow-med); border-color: var(--color-border-emphasized); }
.style-head { display: flex; align-items: center; gap: var(--spacing-1-5); flex-wrap: wrap; }
.style-num { font-family: var(--font-family-code); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--color-accent); line-height: 1; }
.style-card h3 { margin: 0; font-size: var(--text-heading-3-size); line-height: var(--text-heading-3-leading); }
.style-card .en { margin: calc(-1 * var(--spacing-1-5)) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.player { position: relative; aspect-ratio: 9 / 16; width: 100%; border-radius: var(--radius-element); overflow: hidden; background: var(--player-frame); box-shadow: var(--shadow-low); }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--player-frame); }
.style-card .fit { margin: 0; color: var(--color-text-primary); }
.style-card .fit strong { color: var(--color-text-blue); font-weight: var(--font-weight-semibold); }
.traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-1); }
.traits li.chip { cursor: default; }
.traits li.chip:hover { background: var(--chip-bg); color: var(--color-text-secondary); }
.style-meta { margin-top: auto; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-3); grid-template-columns: 1fr; }
.how-steps li { display: flex; gap: var(--spacing-2); align-items: flex-start; padding: var(--spacing-3); border: var(--card-border); border-radius: var(--card-radius); background: var(--color-background-card); }
.how-steps .how-num { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-semibold); }
.how-steps h3 { margin: 0 0 var(--spacing-0-5); font-size: var(--text-body-size); }
.how-steps p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.site-footer .made { flex-basis: 100%; }
@media (max-width: 719.98px) {
  .jump .chip { min-height: var(--tap-target); }
  .site-footer .made { order: 3; }
}
@media (min-width: 720px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .site-footer .made { flex-basis: auto; }
}
@media (min-width: 1080px) {
  .style-grid { grid-template-columns: repeat(4, 1fr); }
}