/* TYPOGRAPHY SECTION */
#fonts {
    position: relative;
    overflow: hidden;
}
#fonts::before {
    content: 'TYPOGRAPHY';
    position: absolute; top: 30px; right: -10px;
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 180px);
    font-weight: 700; color: transparent;
    -webkit-text-stroke: 1px rgba(0,0,0,0.055);
    letter-spacing: -4px; pointer-events: none; line-height: 1; user-select: none;
    overflow: hidden;
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.card {
    /* Captions sit on a photo + dark gradient, so this is a dark surface
       even when the surrounding section is light — re-fix the tokens. */
    --text-primary: #ffffff;
    --text-secondary: #c9c9c9;
    --gold-300: #c9c9c9;
    --gold-400: #ffffff;
    --brand-300: var(--gold-300);
    --brand-400: var(--gold-400);
    --border-gold: rgba(255,255,255,0.32);
    color: #ffffff;

    background: #111111;
    border: 1px solid var(--border, rgba(0,0,0,0.13));
    border-radius: 0;
    padding: 0; min-height: 460px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-size: cover; background-position: center;
    overflow: hidden; position: relative;
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.3s;
    cursor: pointer; text-decoration: none; color: inherit;
    filter: grayscale(35%);
}
.card:hover { filter: grayscale(0%); }
.card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.93) 100%);
    z-index: 1; transition: background 0.5s ease;
}
.card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border-gold);
}
.card:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.95) 100%);
}
.card-body { padding: 32px; position: relative; z-index: 2; }
.card-number {
    font-family: var(--font-display); font-size: 9px;
    letter-spacing: 2px; color: var(--gold-400); margin-bottom: 10px; display: block;
}
.card h3 {
    font-family: var(--font-display); font-size: 20px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-primary); margin-bottom: 10px; line-height: 1.3;
}
.card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; font-weight: 300; }
.card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold-400); transition: gap 0.3s ease, color 0.3s ease;
}
.card:hover .card-link { gap: 10px; color: var(--gold-300); }