.page-main--artists {
max-width: var(--directory-max);
}
.artists-controls[hidden],
[data-artist][hidden] {
display: none !important;
}
.artists-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-bottom: 28px;
}
.view-switch {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.view-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
font-family: var(--font-sans);
font-size: var(--fs-ui);
color: var(--text-soft);
background: none;
border: 0;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.view-btn + .view-btn {
border-left: 1px solid var(--border);
}
.view-btn svg {
flex: none;
opacity: 0.85;
}
.view-btn:hover {
color: var(--text);
}
.view-btn--active {
color: var(--text);
background: var(--surface-hover);
font-weight: 600;
}
.view-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
color: var(--text);
}
.artists-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 1 1 auto;
}
.artists-count {
flex: 1 1 100%;
}
.artist-id {
display: inline-flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.artist-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
.artist-avatar {
position: relative;
display: inline-grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: var(--radius-full);
background: var(--bg-light);
border: 1px solid var(--border);
overflow: hidden;
}
.artist-avatar-initial {
font-family: var(--font-serif);
font-weight: 700;
font-size: var(--fs-body);
line-height: var(--lh-flat);
color: var(--text-soft);
}
.artist-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--bg-light);
}
.artists-table .artist-avatar {
width: 26px;
height: 26px;
}
.artist-status {
display: inline-block;
flex: none;
padding: clamp(2px, calc(1.5px + 0.1vw), 3px)
clamp(6px, calc(4px + 0.4vw), 9px);
font-family: var(--font-mono);
font-size: clamp(0.625rem, calc(0.55rem + 0.25vw), var(--fs-label));
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--radius-full);
}
.artist-status--open {
color: var(--pine);
background: color-mix(in srgb, var(--pine) 14%, transparent);
border-color: color-mix(in srgb, var(--pine) 34%, transparent);
}
.artist-status--unknown {
color: var(--text-soft);
background: var(--surface-hover);
border-color: var(--border);
}
.artist-status--closed {
color: var(--warning);
background: var(--warning-bg1);
border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}
.artist-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.artist-links a {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-light);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.artist-links a:hover {
color: var(--accent);
border-color: var(--accent-muted);
background: var(--bg-surface);
}
.artists-gallery {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
gap: 18px;
align-items: stretch;
}
.artist-card {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-block);
overflow: hidden;
transition: border-color 0.15s var(--ease-out);
}
.artist-card:hover {
border-color: var(--accent-muted);
}
.artist-preview {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 3 / 2;
background: var(--bg-light);
border-bottom: 1px solid var(--border);
overflow: hidden;
flex: none;
}
.artist-monogram {
font-family: var(--font-serif);
font-weight: 700;
font-size: var(--fs-display);
line-height: var(--lh-flat);
color: var(--text-soft);
user-select: none;
-webkit-user-select: none;
}
.artist-preview--none .specialist-art-link {
display: none;
}
.artist-status-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
display: inline-flex;
background: var(--bg-surface);
border-radius: var(--radius-full);
}
.artist-preview-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.artist-card-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 9px;
padding: 13px 14px 15px;
}
.artist-card-head .artist-id { min-height: 30px; }
.specialist-profile-category {
margin: 0;
color: var(--text-soft);
font-size: var(--fs-label);
}
.specialist-description {
margin: 0;
font-size: var(--fs-ui);
overflow-wrap: anywhere;
white-space: pre-line;
}
.artists-table .specialist-profile-category,
.artists-table .specialist-description { margin-top: 6px; }
.specialist-categories {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.specialist-category {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: var(--text-soft);
text-decoration: none;
border-bottom: 2px solid transparent;
font-size: var(--fs-ui);
}
.specialist-category:hover { color: var(--accent); }
.specialist-category[aria-current] { color: var(--text); border-color: var(--accent); font-weight: 600; }
.specialist-category span { color: var(--text-soft); font-variant-numeric: tabular-nums; font-size: var(--fs-label); }
.specialist-category:focus-visible,
.specialist-art-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.specialist-category-intro { margin-bottom: 24px; }
.specialist-category-intro h2 { margin: 0; font-size: var(--fs-subtitle); }
.specialist-works-missing { margin: 0; color: var(--text-soft); font-size: var(--fs-ui); }
.specialist-art-link { position: absolute; inset: 0; display: block; }
.specialist-portfolio { padding-top: 12px; border-top: 1px solid var(--border); }
.specialist-portfolio h3 { margin: 0 0 8px; font: 600 var(--fs-ui) var(--font-sans); }
.specialist-works { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.specialist-work { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.specialist-work-type { color: var(--text-soft); font-size: var(--fs-label); flex: none; }
.specialist-work a { color: var(--accent); font-size: var(--fs-ui); overflow-wrap: anywhere; text-underline-offset: 3px; }
.specialist-work a:hover { color: var(--accent-hover); }
.specialist-work a:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.specialist-track-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-ui); }
.specialist-audio { width: 100%; min-width: 0; height: 40px; }
.specialist-play { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--accent); cursor: pointer; }
.specialist-play[hidden] { display: none; }
.specialist-play svg + svg,
.specialist-play[aria-pressed="true"] svg:first-child { display: none; }
.specialist-play[aria-pressed="true"] svg + svg { display: block; }
.specialist-play:hover { background: var(--surface-hover); }
.specialist-play:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.specialist-reset,
.specialist-submit { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.specialist-reset:focus-visible,
.specialist-submit:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.artists-table .specialist-works { min-width: 160px; }
.artist-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.artists-board {
display: flex;
align-items: flex-start;
gap: 16px;
overflow-x: auto;
padding-bottom: 4px;
}
.board-col {
flex: 1 1 0;
min-width: 220px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-block);
overflow: hidden;
}
.board-col-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.board-col-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-label);
color: var(--text-soft);
}
.board-col-list {
list-style: none;
margin: 0;
padding: 0;
}
.board-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
}
.board-col-list .board-card:last-child {
border-bottom: 0;
}
.artists-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-block);
}
.artists-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
font-size: var(--fs-ui);
}
.artists-table .artist-name {
overflow-wrap: normal;
word-break: normal;
}
.artists-table th {
text-align: left;
padding: 11px 16px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-soft);
background: var(--bg-table-head);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.artists-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.artists-table tbody tr:last-child td {
border-bottom: 0;
}
.artists-table tbody tr:hover {
background: var(--surface-hover);
}
.artists-empty {
margin: 28px 0 0;
font-size: var(--fs-ui);
color: var(--text-soft);
}
@media (max-width: 40em) {
.artists-gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.artist-card-head .artist-id {
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
min-height: calc(30px + 1lh + 6px);
gap: 6px;
}
.board-col {
min-width: 200px;
}
.view-btn {
padding: 12px 16px;
}
.artist-links a {
padding: 10px 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.view-btn,
.artist-card,
.artist-links a {
transition: none;
}
}