.references-page {
    max-width: 1240px;
    min-height: 620px;
    margin: 0 auto;
    padding: 82px 30px 120px;
}

.references-heading {
    max-width: 650px;
    margin: 0 auto 58px;
    text-align: center;
}

.references-heading h1 {
    margin: 16px 0 14px;
    font: 600 clamp(43px, 5vw, 68px)/1.1 var(--serif);
    letter-spacing: -.05em;
}

.references-heading-dot { color: var(--copper); }
.references-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }


.references-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.reference-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fffdf9;
    border: 1px solid #e7ded2;
    border-radius: 3px;
    box-shadow: 0 15px 32px #3b2b1d0c;
    transition: transform .25s ease, box-shadow .25s ease;
}

.reference-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px #3b2b1d1a; }

.reference-card-cover {
    position: relative;
    height: 235px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #f8eee2;
    background: radial-gradient(circle at 68% 20%, #805a41 0, transparent 42%), linear-gradient(135deg, #3c2d25, #624631);
}

.reference-card-cover::before,
.reference-card-cover::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid #fff4e32b;
    border-radius: 50%;
}

.reference-card-cover::before { left: -150px; top: -195px; }
.reference-card-cover::after { right: -150px; bottom: -220px; }

.reference-cover-label {
    position: absolute;
    z-index: 1;
    top: 22px;
    left: 25px;
    color: #e8cfb5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.reference-cover-monogram {
    position: relative;
    z-index: 1;
    font: italic 500 94px/1 var(--serif);
    letter-spacing: -.13em;
    text-shadow: 0 8px 20px #20150e44;
}

.reference-cover-monogram span { color: #d9aa7e; }
.reference-cover-star { position: absolute; right: 25px; bottom: 20px; color: #dfb78f; }
.reference-cover-star svg { width: 26px; height: 26px; }

.reference-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 29px 25px;
}

.reference-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--copper);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
}

.reference-card-kicker span { width: 15px; height: 1px; background: var(--copper); }
.reference-card h2 { margin: 16px 0 11px; font: 600 30px/1.2 var(--serif); letter-spacing: -.035em; }
.reference-description { margin: 0 0 28px; color: #6f6257; font-size: 13px; line-height: 1.75; }

.reference-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.reference-footer-caption { color: #9a8b7d; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.reference-links { display: flex; flex: none; gap: 8px; }

.reference-links a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: #f6f0e9;
    border: 1px solid #e8dccc;
    border-radius: 50%;
    color: #67472f;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.reference-links a:hover,
.reference-links a:focus-visible { background: #453227; border-color: #453227; color: #fff9f0; }
.reference-links svg { width: 17px; height: 17px; }
.reference-links .instagram-dot { fill: currentColor; stroke: none; }

@media (max-width: 950px) {
    .references-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .references-page { padding: 60px 20px 85px; }
    .references-heading { margin-bottom: 36px; }
    .references-heading p { font-size: 12px; }
    .references-list { grid-template-columns: 1fr; gap: 22px; }
    .reference-card-cover { height: 205px; }
    .reference-card-body { padding: 25px 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .reference-card, .reference-links a { transition: none; }
}