:root {
  --ink:#171715;
  --paper:#f2eee6;
  --moss:#b9ca8b;
  --yellow:#f1bb54;
  --blue:#63a4bc;
  --pink:#ed7a86;
  --orange:#f8af22;
  --muted:#6c6b65;
  --display:'Archivo Black',Impact,sans-serif;
  --body:'DM Sans',Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
::selection { background:var(--moss); color:var(--ink); }
.container { width:min(calc(100% - 92px),1440px); margin-inline:auto; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.site-header { height:82px;position:sticky;top:0;z-index:80;background:var(--ink);color:white;border-bottom:1px solid #3a3a37; }
.navigation { height:100%;display:flex;gap:36px;align-items:center; }
.brand { display:flex;align-items:center;flex:none;width:179px; }
.brand img { width:100%;height:auto; }
.nav-links { display:flex;align-items:center;gap:34px;margin-left:auto; }
.nav-links a { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;transition:color .2s; }
.nav-links a:hover,.nav-links a[aria-current=page] { color:var(--moss); }
.nav-button { display:inline-flex;align-items:center;gap:12px;padding:16px 19px;background:var(--moss);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; }
.nav-button span { font-size:18px;line-height:0; }
.mobile-menu { display:none;background:none;border:0;color:#fff;font-size:25px;padding:9px; }
.eyebrow { display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; }
.eyebrow--moss { color:var(--moss); }
.eyebrow--yellow { color:var(--yellow); }
.eyebrow--blue { color:var(--blue); }
.huge-title { margin:22px 0 27px;font-family:var(--display);font-size:clamp(68px,9.3vw,158px);line-height:.87;letter-spacing:-.078em;text-transform:uppercase;overflow-wrap:anywhere; }
.huge-title span { display:block; }
.text-arrow { display:inline-flex;align-items:center;gap:17px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid currentColor;padding:0 0 12px; }
.text-arrow span { font-size:21px;line-height:0; }
.text-arrow:hover { color:var(--blue); }
.solid-link { display:inline-flex;align-items:center;gap:20px;padding:18px 23px;background:var(--moss);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;transition:transform .18s; }
.solid-link:hover { transform:translateY(-3px); }
.solid-link span { font-size:19px;line-height:0; }
.topline { display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:38px; }
.breadcrumb { font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; }
.breadcrumb a { opacity:.7; }
.breadcrumb a:hover { opacity:1;text-decoration:underline; }
.breadcrumb i { font-style:normal;opacity:.4;margin-inline:10px; }
.proof-label { font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.65; }

/* Artist directory — compact cards that lead to full profiles. */
.directory-hero { background:var(--paper);padding-bottom:118px; }
.directory-heading { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.6fr);align-items:end;gap:70px;padding-top:100px; }
.directory-heading h1 { max-width:980px; }
.directory-heading h1 span:last-child { color:var(--blue); }
.directory-intro { max-width:410px;padding-bottom:10px; }
.directory-intro p { font-size:20px;line-height:1.55;letter-spacing:-.025em;margin:0 0 35px; }
.directory-content { background:var(--ink);color:var(--paper);padding:90px 0 136px; }
.section-top { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid #45443e;padding-bottom:26px;margin-bottom:46px; }
.section-top h2 { margin:0;font-family:var(--display);font-size:clamp(42px,5.2vw,80px);line-height:.92;letter-spacing:-.065em;text-transform:uppercase; }
.section-top p { margin:0;color:#a9aaa1;font-size:13px; }
.directory-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,46px);align-items:start; }
.artist-tile { position:relative;display:block;isolation:isolate; }
.tile-picture { position:relative;overflow:hidden;aspect-ratio:4/4.5;background:var(--blue); }
.tile-picture::after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,23,21,.72),transparent 48%); }
.tile-picture img { width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .5s ease; }
.artist-tile:hover img { transform:scale(1.05); }
.tile-info { position:absolute;z-index:2;bottom:21px;left:25px;right:23px;display:flex;align-items:end;justify-content:space-between;gap:15px; }
.tile-info small { display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;margin-bottom:8px; }
.tile-info strong { font-family:var(--display);font-size:clamp(25px,3vw,40px);line-height:.95;letter-spacing:-.055em;text-transform:uppercase; }
.tile-arrow { display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:22px; }
.artist-tile--oomloud .tile-arrow { background:var(--pink); }

/* Full artist profile. */
.profile-hero { color:var(--paper);background:var(--ink);overflow:hidden; }
.profile-hero .topline { padding-top:28px; }
.profile-grid { min-height:660px;display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch;gap:clamp(20px,3vw,50px);padding-top:52px; }
.profile-copy { display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:36px 0 76px;position:relative;z-index:2; }
.profile-copy h1 { margin:35px 0 25px;font-family:var(--display);font-size:clamp(68px,8vw,144px);line-height:.87;letter-spacing:-.08em;text-transform:uppercase; }
.profile-copy h1 span { display:block; }
.profile-copy h1 span:last-child { color:var(--yellow); }
.artist-oomloud .profile-copy h1 { font-size:clamp(55px,6.2vw,105px); }
.artist-oomloud .profile-copy h1 span:last-child { color:var(--orange); }
.artist-oomloud .profile-picture::before { background:var(--pink); }
.profile-copy p { max-width:440px;margin:10px 0 38px;color:#cac8bf;font-size:17px;line-height:1.62; }
.hero-actions { display:flex;gap:30px;align-items:center;flex-wrap:wrap; }
.profile-picture { position:relative;align-self:end;height:100%;min-height:650px; }
.profile-picture::before { content:"";position:absolute;inset:8% 7% 0 0;background:var(--blue);transform:translate(18px,-12px); }
.profile-picture img { position:relative;width:100%;height:100%;object-fit:cover;object-position:center 17%;filter:contrast(1.04); }
.picture-label { position:absolute;bottom:0;left:0;background:var(--pink);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:14px 22px; }
.artist-bio { background:var(--paper);padding:106px 0 110px; }
.bio-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,150px);align-items:start; }
.bio-grid h2 { font-family:var(--display);font-size:clamp(51px,5.5vw,85px);line-height:.95;letter-spacing:-.07em;margin:24px 0 0;text-transform:uppercase; }
.bio-copy { border-left:3px solid var(--moss);padding-left:34px; }
.bio-copy p { font-size:17px;line-height:1.72;max-width:720px;margin:0 0 18px; }
.bio-fact { display:flex;gap:25px;align-items:center;margin-top:31px;border-top:1px solid #ccc8bf;padding-top:24px; }
.bio-fact strong { color:var(--ink);font-family:var(--display);font-size:38px;letter-spacing:-.07em; }
.bio-fact span { font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }
.live-strip { background:var(--blue); }
.live-strip img { display:block;width:100%;height:clamp(300px,38vw,540px);object-fit:cover;object-position:center 48%; }
.live-caption { background:var(--blue);color:var(--ink);padding:16px 0;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em; }
.live-caption .container { display:flex;justify-content:space-between;gap:18px; }
.releases { background:var(--ink);color:var(--paper);padding:110px 0 128px; }
.release-heading { display:grid;grid-template-columns:1fr auto;align-items:end;gap:25px;margin:26px 0 52px; }
.release-heading h2 { margin:0;font-family:var(--display);font-size:clamp(59px,7.4vw,115px);line-height:.9;letter-spacing:-.077em;text-transform:uppercase; }
.release-heading h2 em { font-style:normal;color:var(--pink); }
.release-heading p { margin:0 0 3px;max-width:280px;color:#bab7b1;font-size:13px;line-height:1.55; }
.release-subhead { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px; }
.release-subhead h3 { margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase; }
.release-subhead small { color:#999991;font-size:11px; }
.release-list { border-top:1px solid #45443e; }
.release-item { display:grid;grid-template-columns:118px minmax(0,1fr) 124px 30px;align-items:center;gap:22px;border-bottom:1px solid #45443e;padding:22px 0;transition:background .2s; }
.release-item[href] { cursor:pointer; }
.release-item[href]:hover,.release-item[href]:focus-visible { background:#22221f; }
.release-item[href]:focus-visible { outline:2px solid var(--yellow);outline-offset:4px; }
.release-code { color:var(--moss);font-size:11px;font-weight:800;letter-spacing:.12em;white-space:nowrap; }
.release-name { font-family:var(--display);font-size:clamp(20px,2vw,29px);line-height:1.13;letter-spacing:-.047em; }
.release-collabs { color:#aaa8a1;font-size:12px;margin-top:7px; }
.release-date { color:#b9b8b0;font-size:11px;font-weight:700;white-space:nowrap;text-align:right; }
.release-action { color:var(--yellow);font-size:22px;text-align:center; }
.upcoming-chip { display:inline-block;margin-left:9px;background:var(--yellow);padding:4px 6px;color:var(--ink);font-size:9px;letter-spacing:.08em;vertical-align:middle;text-transform:uppercase;font-family:var(--body);font-weight:800; }
.archive { background:var(--paper);padding:100px 0 120px; }
.archive-headline { display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:37px; }
.archive-headline h2 { font-family:var(--display);font-size:clamp(45px,5.4vw,85px);letter-spacing:-.07em;line-height:.9;text-transform:uppercase;margin:22px 0 0; }
.archive-headline p { max-width:340px;font-size:13px;line-height:1.55;color:var(--muted); }
.archive-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 60px;border-top:1px solid #c9c5b9; }
.archive-item { padding:22px 0;border-bottom:1px solid #c9c5b9;display:grid;grid-template-columns:74px 1fr;gap:17px; }
.archive-item small { color:#69685f;font-size:10px;letter-spacing:.09em;font-weight:800; }
.archive-item h3 { font-family:var(--display);font-size:19px;line-height:1.2;letter-spacing:-.045em;margin:0 0 7px; }
.archive-item p { margin:0;color:#66645c;font-size:12px;line-height:1.5; }
.archive-foot { font-size:11px;line-height:1.6;color:var(--muted);margin-top:31px; }
.back-directory { background:var(--moss);padding:65px 0; }
.back-directory .container { display:flex;align-items:center;justify-content:space-between;gap:25px; }
.back-directory h2 { margin:0;font-family:var(--display);font-size:clamp(36px,4.5vw,72px);letter-spacing:-.067em;text-transform:uppercase;line-height:.98; }
.back-directory .text-arrow { flex-shrink:0; }
.site-footer { background:var(--ink);color:var(--paper);padding:72px 0 35px; }
.footer-row { display:flex;justify-content:space-between;gap:50px;align-items:start; }
.footer-brand img { display:block;width:184px;height:auto;max-width:100%; }
.footer-brand p { color:#b8b5aa;font-size:13px;margin:21px 0 0; }
.footer-nav { display:flex;gap:70px; }
.footer-nav div { display:flex;flex-direction:column;gap:13px; }
.footer-nav b { text-transform:uppercase;letter-spacing:.14em;font-size:11px;margin-bottom:6px; }
.footer-nav a { color:#c2beb6;font-size:12px; }
.footer-nav a:hover { color:var(--yellow); }
.footer-bottom { border-top:1px solid #3d3d39;margin-top:74px;padding-top:26px;display:flex;justify-content:space-between;gap:20px;color:#88877e;font-size:11px; }
@media (max-width:1050px) {
  .container { width:calc(100% - 62px); }
  .navigation { gap:22px; }
  .nav-links { gap:19px; }
  .profile-copy h1 { font-size:clamp(64px,7vw,104px); }
  .profile-grid { min-height:580px; }
  .profile-picture { min-height:560px; }
  .bio-grid { gap:50px; }
}
@media (max-width:900px) {
  .site-header { height:72px; }
  .brand { width:160px; }
  .navigation { gap:14px; }
  .nav-links { position:fixed;top:72px;left:0;right:0;bottom:0;margin:0;padding:45px 28px;display:flex;align-items:flex-start;flex-direction:column;gap:29px;background:var(--ink);transform:translateX(105%);visibility:hidden;transition:transform .25s;z-index:80;overflow-y:auto; }
  .menu-open .nav-links { transform:translateX(0);visibility:visible; }
  .nav-links a { font-family:var(--display);font-size:32px;letter-spacing:-.04em; }
  .nav-button { margin-left:auto;padding:13px 14px;gap:7px;font-size:10px; }
  .mobile-menu { display:block; }
}
@media (max-width:800px) {
  .container { width:calc(100% - 42px); }
  .directory-heading { grid-template-columns:1fr;gap:20px;padding-top:70px; }
  .directory-heading h1 { margin-bottom:0; }
  .directory-intro { max-width:650px;padding:0; }
  .directory-intro p { font-size:17px; }
  .directory-hero { padding-bottom:80px; }
  .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:28px; }
  .profile-grid { grid-template-columns:1fr;gap:0;padding-top:15px; }
  .profile-copy { padding:65px 0 55px; }
  .profile-copy h1 { font-size:clamp(76px,13vw,125px); }
  .artist-oomloud .profile-copy h1 { font-size:clamp(55px,9vw,95px); }
  .profile-picture { min-height:0;height:530px;max-width:680px;width:100%;justify-self:center; }
  .profile-picture img { object-position:center 18%; }
  .bio-grid { grid-template-columns:1fr;gap:35px; }
  .artist-bio { padding:90px 0; }
  .release-heading { grid-template-columns:1fr; }
  .release-heading p { max-width:650px; }
  .release-item { grid-template-columns:95px 1fr 99px 20px;gap:12px; }
  .archive-grid { gap:0 30px; }
}
@media (max-width:620px) {
  .huge-title { font-size:clamp(65px,14vw,100px); }
  .directory-content { padding:70px 0 90px; }
  .section-top { align-items:start;flex-direction:column; }
  .directory-grid { grid-template-columns:1fr;gap:50px; }
  .artist-tile { max-width:470px; }
  .topline { padding-top:24px; }
  .proof-label { display:none; }
  .profile-copy h1 { font-size:clamp(63px,14.6vw,100px); }
  .artist-oomloud .profile-copy h1 { font-size:clamp(50px,12vw,78px); }
  .profile-copy p { font-size:15px; }
  .profile-picture { height:410px; }
  .hero-actions { gap:19px; }
  .bio-copy { padding-left:22px; }
  .bio-copy p { font-size:15px; }
  .live-strip img { height:270px; }
  .live-caption span:last-child { display:none; }
  .releases { padding:85px 0; }
  .release-heading h2 { font-size:clamp(52px,12vw,76px); }
  .release-item { grid-template-columns:1fr 75px 23px;gap:8px 10px;padding:20px 0; }
  .release-code { grid-column:1/-1;font-size:10px;margin-bottom:4px; }
  .release-name { font-size:20px; }
  .release-collabs { font-size:11px; }
  .release-date { font-size:10px; }
  .archive { padding:85px 0; }
  .archive-headline { align-items:start;flex-direction:column;gap:10px; }
  .archive-grid { grid-template-columns:1fr; }
  .archive-item { grid-template-columns:78px 1fr; }
  .back-directory .container { flex-direction:column;align-items:flex-start; }
  .footer-row { flex-direction:column; }
  .footer-nav { gap:45px; }
  .footer-bottom { margin-top:55px; }
}
@media (max-width:600px) {
  .nav-button { display:none; }
  .mobile-menu { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}

/* Artist catalogue expansion. Reuses the approved cards and profile template. */
.directory-controls { margin:0 0 48px; border-bottom:1px solid #4b4a45; padding-bottom:27px; }
.directory-controls label { display:block;font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;margin-bottom:14px; }
.directory-search-row { display:flex;gap:20px;align-items:center;justify-content:space-between; }
.directory-search-row input { width:min(100%,550px);color:var(--paper);background:#272724;border:1px solid #6c6b65;border-radius:0;font:500 17px var(--body);padding:18px 20px;outline-offset:4px; }
.directory-search-row input:focus-visible { outline:2px solid var(--yellow); }
.directory-search-row span { color:#bcbab4;white-space:nowrap;font-size:12px; }
.directory-alphabet { display:flex;flex-wrap:wrap;gap:7px;margin-top:18px; }
.directory-alphabet button { border:1px solid #66665f;background:transparent;color:var(--paper);padding:10px 11px;min-width:36px;font-weight:800;font-size:11px; }
.directory-alphabet button[aria-pressed="true"] { background:var(--yellow);color:var(--ink);border-color:var(--yellow); }
.directory-alphabet button:hover { border-color:var(--yellow); }
.artist-tile[hidden] { display:none; }
.artist-tile-placeholder { width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(130deg,#558ca1,#b9ca8b);padding:36px; }
.artist-tile-placeholder span { font:32px var(--display);text-transform:uppercase;word-break:break-word; }
.profile-photo-placeholder { width:100%;height:100%;display:grid;place-items:center;background:var(--blue);padding:35px;color:var(--ink);font:clamp(28px,3vw,55px) var(--display);text-align:center;text-transform:uppercase; }
.artist-title-generic { font-size:clamp(52px,6.7vw,108px)!important;overflow-wrap:anywhere; }
.artist-title-generic span { display:inline!important;color:var(--yellow)!important; }
.artist-title-generic span:not(:last-child)::after { content:' ';white-space:pre; }
.tile-info strong { overflow-wrap:anywhere; }
.artist-catalogue-note { color:#aaa9a2;font-size:11px;line-height:1.5;margin-top:26px; }
.directory-grid { grid-template-columns:repeat(5,minmax(0,1fr));gap:22px; }
.tile-info { left:14px;right:12px;bottom:14px;gap:7px; }
.tile-info strong { font-size:clamp(15px,1.35vw,22px);line-height:1.03; }
.tile-arrow { width:32px;height:32px;font-size:19px; }
/* Keep the full supplied second picture visible, whether square or wide. */
.live-strip img { object-fit:contain;background:var(--blue); }
.archive-item[href] { color:inherit;text-decoration:none;transition:color .18s ease; }
.archive-item[href]:hover h3 { color:#777236; }
.archive-item[href]:focus-visible { outline:2px solid var(--yellow);outline-offset:3px; }
@media(max-width:1180px) { .directory-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:950px) { .directory-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; } }
@media(max-width:800px) { .artist-title-generic { font-size:clamp(47px,8.5vw,85px)!important; } }
@media(max-width:800px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; } }
@media(max-width:620px) { .directory-search-row { display:block; } .directory-search-row span { display:block;margin-top:12px; } .artist-title-generic { font-size:clamp(42px,10vw,67px)!important; } .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; } .tile-info strong { font-size:clamp(14px,3.3vw,19px); } .tile-arrow { width:27px;height:27px; } }

/* Names without an artist image: fit whole words inside the existing card. */
.artist-tile[data-name-fit] .artist-tile-placeholder {
  padding:16px 10px 58px;
  container-type:inline-size;
}
.artist-tile[data-name-fit] .artist-tile-placeholder .fallback-name {
  width:100%;min-width:0;text-align:center;
  font-size:min(32px,calc(var(--fallback-fit) * 1cqw));
  line-height:1.12;word-break:normal;overflow-wrap:normal;hyphens:none;
}
.artist-tile[data-name-fit] .fallback-name-line {
  display:block;white-space:nowrap;
}
.artist-tile[data-name-fit] .artist-tile-placeholder .fallback-name-line { font:inherit; }
.artist-tile[data-name-fit] .tile-info > div {
  flex:1;min-width:0;container-type:inline-size;
}
.artist-tile[data-name-fit] .tile-info strong {
  display:block;font-size:min(clamp(15px,1.35vw,22px),calc(var(--fallback-fit) * 1cqw));
  line-height:1.08;word-break:normal;overflow-wrap:normal;hyphens:none;
}
@media(max-width:620px) {
  .artist-tile[data-name-fit] .tile-info strong {
    font-size:min(clamp(14px,3.3vw,19px),calc(var(--fallback-fit) * 1cqw));
  }
}