.designers-page {
background: #f7f5f0;
color: #101010;
min-height: 100vh;
}

.designers-hero {
padding: clamp(4rem, 9vw, 8rem) 1rem clamp(3rem, 7vw, 5rem);
background: #f7f5f0;
}

.designers-hero__inner {
width: min(1100px, 100%);
margin: 0 auto;
text-align: center;
}

.designers-hero .section-kicker {
margin: 0 0 1rem;
font-family: var(--font-mono, 'Courier New', monospace);
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(16,16,16,.48);
}

.designers-hero h1 {
margin: 0;
font-family: var(--font-display, sans-serif);
font-size: clamp(3rem, 9vw, 8rem);
line-height: .88;
letter-spacing: -.06em;
text-transform: uppercase;
}

.designers-hero p:not(.section-kicker) {
width: min(720px, 100%);
margin: 1.5rem auto 0;
font-family: var(--font-main, Courier, monospace);
font-size: clamp(.95rem, 1.4vw, 1.1rem);
line-height: 1.7;
color: rgba(16,16,16,.68);
}

.designer-list {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
padding: 0 0 clamp(4rem, 8vw, 7rem);
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
}

.designer-card {
display: grid;
grid-template-columns: .9fr 1.1fr;
min-height: 430px;
background: #101010;
color: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(0,0,0,.16);
}

.designer-card--reverse {
grid-template-columns: 1.1fr .9fr;
}

.designer-card--reverse .designer-card__media {
order: 2;
}

.designer-card--reverse .designer-card__content {
order: 1;
}

.designer-card__media {
position: relative;
background: #d8d2c8;
min-height: 340px;
overflow: hidden;
}

.designer-card__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(0,0,0,.18), rgba(0,0,0,0) 52%),
radial-gradient(circle at 30% 20%, rgba(217,255,63,.2), transparent 35%);
pointer-events: none;
}

.designer-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.08);
transition: filter .35s ease, transform .35s ease;
}

.designer-card:hover .designer-card__media img {
filter: grayscale(0%) contrast(1);
transform: scale(1.035);
}

.designer-card__content {
padding: clamp(2rem, 5vw, 4rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.designer-card__label {
margin: 0 0 1rem;
font-family: var(--font-mono, 'Courier', monospace);
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent, #d9ff3f);
}

.designer-card h2 {
margin: 0;
font-family: var(--font-display, sans-serif);
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: .9;
letter-spacing: -.055em;
text-transform: uppercase;
}

.designer-card__content > p:not(.designer-card__label) {
margin: 1.35rem 0 0;
max-width: 620px;
font-family: var(--font-main, Courier, monospace);
font-size: .98rem;
line-height: 1.75;
color: rgba(255,255,255,.72);
}

.designer-card__meta {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1.5rem 0 0;
}

.designer-card__meta span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: .45rem .8rem;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
font-family: Courier;
text-transform: lowercase;
font-weight: bold;
font-size: .75rem;
color: rgba(255,255,255,.76);
}

.designer-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.8rem;
padding: .95rem 1.25rem;
border-radius: 999px;
background: var(--accent, #d9ff3f);
color: #101010;
font-family: Courier;
letter-spacing: .08em;
font-size: .9rem;
text-transform: uppercase;
transition: transform .25s ease, background .25s ease;
}

.designer-card__link,
.designer-card__link:visited,
.designer-card__link:hover,
.designer-card__link:focus,
.designer-card__link:active {
    text-decoration: none;
}

.designer-card__link:hover {
transform: translateY(-2px);
background: #fff;
}

@media (max-width: 900px) {
.designer-card,
.designer-card--reverse {
grid-template-columns: 1fr;
}

.designer-card--reverse .designer-card__media,
.designer-card--reverse .designer-card__content {
order: initial;
}

.designer-card__media {
min-height: 320px;
}

.designer-card__content {
padding: 2rem;
}
}

@media (max-width: 560px) {
.designers-hero {
padding-top: 3rem;
}

.designers-hero h1 {
font-size: clamp(2.75rem, 17vw, 4.5rem);
}

.designer-list {
width: min(100% - 1rem, 1180px);
}

.designer-card {
border-radius: 22px;
}

.designer-card__media {
min-height: 260px;
}

.designer-card__content {
padding: 1.5rem;
}

.designer-card h2 {
font-size: clamp(2.35rem, 15vw, 4rem);
}

.designer-card__link {
width: 100%;
}
}