*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; }

:root {
  --bg: #0a0a0a;
  --surface: #131313;
  --border: #1e1e1e;
  --text: #e8e8e8;
  --muted: #7D7D7D;
  --font: 'Roboto Mono', ui-monospace, monospace;
  --header-h: 72px;
  --filter-h: 38px;
  --tab-h: 36px;
  --tabs-offset: 0px; /* updated by JS when tab bar is visible */
}

html { color-scheme: dark; font-size: 14px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── Site logo ─────────────────────────────────────────── */
.site-logo {
  display: block;
  width: 100%;
  padding: 20px 20px 0;
  line-height: 0;
}

/* ─── Header ────────────────────────────────────────────── */
header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--bg);
  border-block-end: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding-inline: 1rem;
  min-block-size: var(--header-h);
}

.wordmark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

search { flex: 1; min-inline-size: 0; position: relative; }

.search-wrap {
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--text);
  padding-block: 16px;
  transition: border-color 0.15s;
}
.search-wrap:focus-within { border-block-end-color: var(--text); }

.search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text);
  margin-inline-end: 0.4rem;
}

#search-input {
  flex: 1;
  min-inline-size: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  padding-block: 0.35rem;
  outline: none;
}
#search-input::placeholder   { color: var(--muted); }
#search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.search-clear:hover { color: var(--text); }
.search-clear[hidden] { display: none; }

.search-submit {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 40px;
  margin-inline-start: 0.5rem;
  transition: opacity 0.15s;
}
.search-submit:hover { opacity: 0.85; }
.search-submit[hidden] { display: none; }


/* ─── Icon hover: scale SVG for thicker-feeling stroke ──── */
/* transform is compositor-only — no layout, no paint        */
.filter-btn svg,
.search-clear svg,
.modal-close svg,
.filter-close svg,
.tab-close svg {
  transition: transform 0.15s ease-out;
}
.filter-btn:hover svg,
.search-clear:hover svg,
.modal-close:hover svg,
.filter-close:hover svg,
.tab-close:hover svg {
  transform: scale(1.2);
}


/* ─── Designer / filter row ─────────────────────────────── */
.designer-row {
  background: var(--bg);
  border-block-end: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.designer-row::-webkit-scrollbar { display: none; }

.designer-chips {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.designer-chips::-webkit-scrollbar { display: none; }

.filter-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  padding: 9px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.15s;
}
.filter-btn:hover,
.filter-btn[aria-expanded="true"] { color: var(--text); }

/* ─── Thumbnail size control ─────────────────────────────── */
.size-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.size-control:has(.size-btn:hover) { border-color: var(--muted); }

.size-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.5rem;
  height: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.15s;
}
.size-btn:hover { color: var(--text); }
.size-btn:disabled { opacity: 0.25; cursor: default; }
.size-btn + .size-btn { border-left: 1px solid var(--border); }

/* ─── Filter drawer ─────────────────────────────────────── */
.filter-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.filter-overlay.open { opacity: 1; pointer-events: all; }

.filter-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: clamp(320px, 32vw, 640px);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  z-index: 41;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.filter-drawer.open { transform: translateX(0); }

.filter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.75rem;
  border-block-end: 1px solid var(--border);
  flex-shrink: 0;
}

.filter-drawer-title {
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  transition: color 0.15s;
}
.filter-close:hover { color: var(--text); }

.filter-section {
  padding: 1rem;
  border-block-end: 1px solid var(--border);
}
.filter-section:last-child { border-block-end: none; }

.filter-section-label {
  display: block;
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-block-end: 0.85rem;
}

.year-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* Custom-styled range */
#year-slider {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  block-size: 16px;
}
#year-slider::-webkit-slider-runnable-track {
  block-size: 2px;
  background: var(--border);
  border-radius: 1px;
}
#year-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--text);
  margin-block-start: -5px;
  cursor: pointer;
}
#year-slider::-moz-range-track {
  block-size: 2px;
  background: var(--border);
  border-radius: 1px;
}
#year-slider::-moz-range-thumb {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--text);
  border: none;
  cursor: pointer;
}

#year-output {
  font-variant-numeric: tabular-nums;
  min-inline-size: 2.5rem;
  font-size: 1rem;
  color: var(--text);
  text-align: end;
}

#year-clear {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 1rem; padding: 0; line-height: 1;
  transition: color 0.15s;
}
#year-clear:hover { color: var(--text); }

.style-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.style-tag-more {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1rem;
  padding: 0 0.65rem;
  height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.style-tag-more:hover { border-color: var(--muted); color: var(--text); }

.style-tag {
  background: var(--chip-bg, var(--border));
  border: none;
  color: var(--chip-text, var(--muted));
  font-size: 1rem;
  padding: 14px 20px;
  height: auto;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: filter 0.15s, box-shadow 0.15s, border-radius 0.2s, opacity 0.2s;
}
.style-tag:hover                          { filter: brightness(0.9); border-radius: 20px; }
.style-tag[aria-pressed="true"]           { box-shadow: 0 0 0 2.5px var(--chip-text, var(--text)); filter: brightness(1.08); border-radius: 40px; }
.style-tag[aria-pressed="true"]:hover     { border-radius: 12px; }

/* dim unchosen chips whenever at least one is selected */
.style-tags:has(.style-tag[aria-pressed="true"]) .style-tag:not([aria-pressed="true"]) {
  opacity: 0.35;
}
.style-tags:has(.style-tag[aria-pressed="true"]) .style-tag:not([aria-pressed="true"]):hover {
  opacity: 0.8;
}

/* ─── Tab bar ───────────────────────────────────────────── */
.tab-bar {
  background: var(--bg);
  border-block-end: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-bar[hidden] { display: none; }
.tab-bar::-webkit-scrollbar { display: none; }

.tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s, border-radius 0.2s;
}
.tab-chip:hover:not(.active) { background: rgb(232 232 232 / 0.08); border-radius: 20px; }
.tab-chip.active             { background: var(--text); color: var(--bg); border-radius: 40px; border-color: transparent; }
.tab-chip.active:hover       { border-radius: 12px; }

.tab-label { cursor: pointer; }

.tab-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.55;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.type-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.type-chip {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--muted);
  padding: 14px 20px;
  height: auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, border-radius 0.2s;
}
.type-chip:hover                          { border-color: var(--border); color: var(--text); border-radius: 20px; }
.type-chip[aria-pressed="true"]           { border-color: var(--muted); color: var(--text); }
.type-chip[aria-pressed="true"]:hover     { border-radius: 2px; }

/* ─── Designer suggestion chips ─────────────────────────── */
.designer-label {
  background: var(--muted);
  color: var(--bg);
  border-radius: 8px;
  font-size: 1rem;
  padding: 20px 24px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.designer-label[hidden] { display: none; }

.designer-chip {
  background: #f48d5e;
  border: 1px solid var(--bg);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--bg);
  padding: 20px 24px;
  height: auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: filter 0.15s, border-radius 0.2s;
}
.designer-chip:hover { filter: brightness(0.88); border-radius: 20px; }

.chip-entity-type {
  font-size: 1rem;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-inline-end: 0.4rem;
  opacity: 0.55;
}
.chip-entity-disambig {
  color: inherit;
  opacity: 0.55;
}

/* ─── Entity header ─────────────────────────────────────── */
.entity-header {
  padding: 2.5rem 1rem 1.5rem;
  overflow: hidden;
}
.entity-header[hidden] { display: none; }

.entity-name {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 46, 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'slnt' 0;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  overflow-wrap: break-word;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-block-end: 0.6rem;
}

.entity-bio {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  max-inline-size: 68ch;
}

.entity-wiki-link {
  display: inline-block;
  margin-block-start: 0.6rem;
  font-size: 1rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.entity-wiki-link:hover { color: var(--text); }
.entity-wiki-link[hidden] { display: none; }


/* ─── Grid ──────────────────────────────────────────────── */
/*
  Breakpoint strategy (mobile-first, explicit column counts):
    < 480 px   → 2 columns  (phone portrait — covers as large as possible)
    480–767 px → 3 columns  (large phone / landscape)
    768 px+    → auto-fill, min 185 px (tablet / desktop)
    1600 px+   → auto-fill, min 220 px (wide desktop, slightly larger cells)
*/

main { padding: 2px; flex: 1; }

.grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr); /* mobile default */
}

@media (min-width: 480px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min, 185px), 1fr)); }
}

@media (min-width: 1600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min, 220px), 1fr)); }
}

.grid-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1;
  border-radius: 12px;
}

.grid-item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: opacity 0.25s;
}

/* Keyboard focus (always visible) */
.grid-item:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}
.grid-item:focus-visible img          { opacity: 0.35; }
.grid-item:focus-visible .grid-item-info { opacity: 1; }

/* Hover: only on pointer devices (avoids stuck-hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .grid-item:hover img               { opacity: 0.35; }
  .grid-item:hover .grid-item-info   { opacity: 1; }
}

.grid-item-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.6rem;
  /* Transparent by default — shown on hover/focus above */
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, transparent 55%);
  transition: opacity 0.2s;
}

/*
  Touch devices: always show the artist label at the bottom.
  We still show full gradient+text so the cover reads as interactive.
*/
@media (hover: none) {
  .grid-item-info {
    opacity: 1;
    background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, transparent 45%);
  }
}

.grid-item-artist {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.grid-item-year {
  font-size: 1rem;
  color: rgb(255 255 255 / 0.5);
  margin-block-start: 0.1rem;
}

/* ─── Status ────────────────────────────────────────────── */
.status {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-size: 1rem;
}

/* ─── Modal ─────────────────────────────────────────────── */
dialog:not([open]) { display: none; }

dialog {
  display: flex;
  flex-direction: column;
  /* Semi-transparent so the grid bleeds through, blurred */
  background: rgb(8 8 8 / 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--text);
  inline-size: 100vw;
  max-inline-size: 100%;
  block-size: 100dvh;
  max-block-size: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  margin: 0;
}

dialog::backdrop { display: none; }

@keyframes modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

dialog[open] {
  animation: modal-in 0.18s ease-out;
}

/* Circle close button */
.modal-close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  background: rgb(0 0 0 / 0.55);
  border: none;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  z-index: 10;
  inline-size: 2rem;
  block-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: rgb(0 0 0 / 0.85); }

/*
  Always single-column: art on top, metadata below.
  Cover is sized to fit within the viewport — min(100%, 80dvh) —
  so you can see it in full and scroll down to the metadata.
*/
.modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers .modal-left and .modal-right horizontally */
  overflow-y: auto;
  overscroll-behavior: contain;
  min-block-size: 0;
  padding-block-start: var(--header-h);
}

.modal-left {
  inline-size: min(100%, 80dvh); /* hugs the cover — same constraint as the image */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.cover-wrap {
  position: relative;
  flex-shrink: 0;
}

#modal-cover {
  inline-size: min(100%, 80dvh);
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  cursor: pointer;
}

.modal-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.modal-spinner[hidden] { display: none; }
.modal-spinner::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 2px solid rgb(255 255 255 / 0.1);
  border-top-color: rgb(255 255 255 / 0.55);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal-thumbs {
  inline-size: min(100%, 80dvh);
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 0.4rem;
}

.modal-thumb {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border: 1px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
}
.modal-thumb:hover,
.modal-thumb.active { opacity: 1; border-color: var(--muted); }

.modal-right {
  inline-size: min(100%, 80dvh);
  margin-inline: auto;
  padding: 1rem 0.75rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  padding-inline-end: 2.5rem;
}

/* Artist and year are clickable — open new tab search */
#modal-artist, #modal-year {
  cursor: pointer;
  transition: color 0.15s;
}
#modal-artist:hover, #modal-year:hover { color: var(--text); }

/* Artist · Year on one line */
.modal-sub {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: 1rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.modal-dot { opacity: 0.45; }

.modal-label {
  font-size: 1rem;
  color: var(--muted);
}
.modal-label:empty { display: none; }

/* Art credits */
.modal-credits {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.modal-credits:empty { display: none; }

.modal-credit-item {
  font-size: 1rem;
  color: var(--muted);
}
.modal-credit-link {
  cursor: pointer;
  transition: color 0.15s;
}
.modal-credit-link:hover { color: var(--text); }
.modal-credit-role {
  opacity: 0.6;
  text-transform: capitalize;
  margin-inline-end: 0.3rem;
}

.modal-styles { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.modal-style-tag {
  font-size: 1rem;
  background: var(--chip-bg, var(--border));
  border: none;
  padding: 14px 20px;
  height: auto;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: var(--chip-text, var(--muted));
  cursor: pointer;
  line-height: 1;
  transition: filter 0.15s, border-radius 0.2s;
}
.modal-style-tag:hover { filter: brightness(0.85); border-radius: 20px; }

.modal-links {
  display: flex;
  gap: 1rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--border);
}

.modal-link {
  font-size: 1rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.modal-link:hover { color: var(--text); }
.modal-link[hidden] { display: none; }

/* ─── Chip palette (vibrant pastels, unique per tag) ────── */
/*
  Applies to both filter bar (.style-tag) and modal (.modal-style-tag).
  12 hues evenly spaced; modal tags cycle with 12n+k if there are more.
*/
.style-tag:nth-child(1),  .modal-style-tag:nth-child(12n+1)  { --chip-bg: hsl(5,   82%, 80%); --chip-text: hsl(5,   55%, 22%); }
.style-tag:nth-child(2),  .modal-style-tag:nth-child(12n+2)  { --chip-bg: hsl(28,  84%, 79%); --chip-text: hsl(28,  55%, 22%); }
.style-tag:nth-child(3),  .modal-style-tag:nth-child(12n+3)  { --chip-bg: hsl(50,  80%, 77%); --chip-text: hsl(50,  55%, 20%); }
.style-tag:nth-child(4),  .modal-style-tag:nth-child(12n+4)  { --chip-bg: hsl(90,  62%, 75%); --chip-text: hsl(90,  45%, 20%); }
.style-tag:nth-child(5),  .modal-style-tag:nth-child(12n+5)  { --chip-bg: hsl(152, 60%, 75%); --chip-text: hsl(152, 45%, 20%); }
.style-tag:nth-child(6),  .modal-style-tag:nth-child(12n+6)  { --chip-bg: hsl(178, 68%, 74%); --chip-text: hsl(178, 50%, 18%); }
.style-tag:nth-child(7),  .modal-style-tag:nth-child(12n+7)  { --chip-bg: hsl(203, 72%, 80%); --chip-text: hsl(203, 52%, 20%); }
.style-tag:nth-child(8),  .modal-style-tag:nth-child(12n+8)  { --chip-bg: hsl(225, 68%, 82%); --chip-text: hsl(225, 48%, 22%); }
.style-tag:nth-child(9),  .modal-style-tag:nth-child(12n+9)  { --chip-bg: hsl(255, 65%, 83%); --chip-text: hsl(255, 45%, 24%); }
.style-tag:nth-child(10), .modal-style-tag:nth-child(12n+10) { --chip-bg: hsl(285, 66%, 81%); --chip-text: hsl(285, 45%, 22%); }
.style-tag:nth-child(11), .modal-style-tag:nth-child(12n+11) { --chip-bg: hsl(318, 72%, 81%); --chip-text: hsl(318, 50%, 22%); }
.style-tag:nth-child(12), .modal-style-tag:nth-child(12n+12) { --chip-bg: hsl(345, 78%, 81%); --chip-text: hsl(345, 52%, 22%); }

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 1rem;
  color: var(--muted);
}
.site-footer-tagline {
  display: block;
  margin-block-end: 0.5rem;
}
.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.site-footer a:hover { color: var(--text); }

/* ─── Skeleton ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  aspect-ratio: 1;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}