/* Base utilities for the modern dark theme. Minimal by design. */

a { color: inherit; text-decoration: none; }

.eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #888888;
}

.link {
    color: #ededed;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.link:hover { color: #ff7a18; border-bottom-color: currentColor; }

.row-link {
    display: grid;
    grid-template-columns: 10rem 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid #1f1f1f;
    color: #ededed;
    transition: color 0.15s ease;
}
.row-link:last-of-type { border-bottom: 1px solid #1f1f1f; }
.row-link .label { font-weight: 500; }
.row-link .desc { color: #888888; font-size: 0.95rem; }
.row-link .arrow { color: #5a5a5a; transition: color 0.15s ease, transform 0.2s ease; }
.row-link:hover .arrow { color: #ff7a18; transform: translateX(3px); }
.row-link:hover .label { color: #ff7a18; }

@media (max-width: 640px) {
    .row-link {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label arrow" "desc arrow";
        row-gap: 0.25rem;
    }
    .row-link .label { grid-area: label; }
    .row-link .desc  { grid-area: desc; }
    .row-link .arrow { grid-area: arrow; align-self: center; }
}

.card {
    background: #121212;
    border: 1px solid #1f1f1f;
    border-radius: 6px;
    transition: border-color 0.15s ease, transform 0.12s ease;
}
.card:hover { border-color: #2a2a2a; }
a.card:hover { border-color: #ff7a18; transform: translateY(-1px); }

.fade-in {
    opacity: 0;
    animation: fade-in 0.4s ease forwards;
}
@keyframes fade-in {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in, .row-link, .row-link .arrow, .link, .card, a.card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}