/* Distorted Moon: an open artist gallery inside the existing visual identity. */
html { scroll-behavior: auto; }
a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 2px solid #e0c368; outline-offset: 5px; }
#roster, #about, #contact, .artist-bio { scroll-margin-top: 6rem; }
.site-header { background: #0c0c0c; backdrop-filter: none; }
.site-header > div { gap: 1.5rem; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #c9c3b6; font-size: .875rem; transition: color 180ms ease; }
.site-nav a:hover { color: #e0c368; }
.site-nav a[href="#about"] { display: none; }
.site-hero .hero-content { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.site-hero h1 { margin-top: 0; font-size: clamp(3.5rem, 12vw, 9rem); }
.hero-actions { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .5rem; }
.hero-actions a { display: inline-flex; gap: .75rem; min-height: 44px; align-items: center; color: #e0c368; font-size: .875rem; }
.hero-actions a + a { color: #c9c3b6; }
.hero-actions a:hover { color: #f0dc9c; }
.roster-section { border-top: 1px solid rgb(232 226 213 / 12%); }
.roster-inner { max-width: 72rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.roster-heading { display: flex; gap: 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 2.5rem; }
.roster-heading h2 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.03em; }
.roster-heading p { max-width: 42ch; margin-top: 1rem; color: #bcb7aa; font-size: 1rem; line-height: 1.5; }
.roster-heading > span { flex-shrink: 0; color: #bcb7aa; font-size: .75rem; letter-spacing: .08em; }
.artist-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; row-gap: 3.5rem; align-items: start; }
.artist-tile { min-width: 0; }
.artist-tile figure { margin: 0; }
.artist-portrait { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #141411; border: 1px solid rgb(232 226 213 / 12%); }
.artist-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.artist-portrait--complete img { object-fit: contain; }
.artist-tile--bruce img { object-position: 50% 40%; }
.artist-tile--egopusher img { object-position: 50% 65%; }
.artist-tile--shake-me img { object-position: 50% 80%; }
.artist-portrait > svg { position: absolute; right: 1rem; bottom: 1rem; width: 40px; height: 40px; padding: 10px; background: #0c0c0c; color: #e8e2d5; border: 1px solid rgb(232 226 213 / 25%); transition: color 180ms ease; }
.artist-portrait:hover > svg, .artist-portrait:focus-visible > svg { color: #e0c368; }
.artist-tile figcaption { min-height: 2.8em; padding-top: .6rem; color: #bcb7aa; font-size: .75rem; line-height: 1.4; }
.artist-tile h3 { margin-top: .875rem; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -.025em; overflow-wrap: break-word; }
.artist-tile h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.artist-tile h3 a:hover { color: #e0c368; }
.artist-genre { margin-top: .5rem; color: #bcb7aa; font-size: .75rem; letter-spacing: .065em; line-height: 1.5; text-transform: uppercase; }
.artist-booking { display: inline-flex; min-height: 44px; align-items: center; gap: .65rem; margin-top: .75rem; color: #e0c368; font-size: .875rem; }
.artist-booking:hover { color: #f0dc9c; }
.artist-details { margin-top: .25rem; border-top: 1px solid rgb(232 226 213 / 15%); }
.artist-details summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; color: #c9c3b6; font-size: .875rem; list-style: none; }
.artist-details summary::-webkit-details-marker { display: none; }
.artist-details summary:hover, .artist-details[open] summary { color: #e8e2d5; }
.artist-details[open] summary svg { transform: rotate(180deg); }
.artist-bio { padding-top: .75rem; }
.artist-bio > p { color: #c9c3b6; font-size: .9375rem; line-height: 1.7; }
.artist-links { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .25rem; margin-top: 1rem; }
.artist-links a { display: inline-flex; min-height: 44px; gap: .5rem; align-items: center; color: #e8e2d5; font-size: .8125rem; }
.artist-links a:hover { color: #e0c368; }
#contact > div > a { font-size: clamp(1rem, 5.7vw, 5rem); }
@media (min-width: 600px) { .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .site-nav a[href="#about"] { display: inline-flex; } }
@media (min-width: 768px) { .roster-inner { padding: 5rem 2.5rem 6rem; } .site-hero .hero-content { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 400px) { .site-nav { gap: 1rem; } .site-header > div { gap: .75rem; } .roster-heading { align-items: start; } .roster-heading > span { margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Shared link feedback, matching the large booking address. */
.link-label { position: relative; display: inline-flex; align-items: center; gap: inherit; }
.link-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #e0c368; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
a:hover .link-label::after, a:focus-visible .link-label::after, summary:hover .link-label::after, summary:focus-visible .link-label::after { transform: scaleX(1); }
.artist-portrait::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e0c368; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.artist-portrait:hover::after, .artist-portrait:focus-visible::after { transform: scaleX(1); }
#contact > div > a .link-label::after { bottom: -8px; }
@media (prefers-reduced-motion: reduce) { .link-label::after, .artist-portrait::after { transition: none; } }

/* Preserve the word space inside the two-tone agency wordmark. */
.site-header > div > a .link-label { display: inline-block; }