levineuwirth.org/static/css/home.css

/* home.css — Homepage-specific styles (loaded only on index.html) */

/* ============================================================
   CONTACT ROW
   Professional links: Email · CV · About · GitHub · GPG · ORCID
   ============================================================ */

.contact-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.35rem 1rem;
    margin: 1.75rem 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
}

.contact-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-row a:hover {
    color: var(--text);
}

.contact-row a[data-contact-icon]::before {
    content: '';
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.contact-row a[data-contact-icon="email"]::before {
    mask-image: url('/images/link-icons/email.svg');
    -webkit-mask-image: url('/images/link-icons/email.svg');
}
.contact-row a[data-contact-icon="document"]::before {
    mask-image: url('/images/link-icons/document.svg');
    -webkit-mask-image: url('/images/link-icons/document.svg');
}
.contact-row a[data-contact-icon="person"]::before {
    mask-image: url('/images/link-icons/person.svg');
    -webkit-mask-image: url('/images/link-icons/person.svg');
}
.contact-row a[data-contact-icon="github"]::before {
    mask-image: url('/images/link-icons/github.svg');
    -webkit-mask-image: url('/images/link-icons/github.svg');
}
.contact-row a[data-contact-icon="key"]::before {
    mask-image: url('/images/link-icons/key.svg');
    -webkit-mask-image: url('/images/link-icons/key.svg');
}
.contact-row a[data-contact-icon="orcid"]::before {
    mask-image: url('/images/link-icons/orcid.svg');
    -webkit-mask-image: url('/images/link-icons/orcid.svg');
}

/* ============================================================
   SITE GUIDE (expandable <details>)
   ============================================================ */

.site-guide {
    margin: 1.5rem 0 0;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.site-guide summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--transition-fast);
}

.site-guide summary::-webkit-details-marker { display: none; }

.site-guide summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.site-guide[open] summary::before {
    transform: rotate(90deg);
}

.site-guide summary:hover {
    color: var(--text);
}

.site-guide-body {
    padding: 0.75rem 1rem 1rem;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border);
}

.site-guide-body p  { margin: 0 0 0.6rem; }
.site-guide-body p:last-child { margin-bottom: 0; }

/* ============================================================
   CURATED GRID
   Hand-picked entry points, one per portal.
   ============================================================ */

.curated-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (max-width: 580px) {
    .curated-grid {
        grid-template-columns: 1fr;
    }
}

.curated-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast);
}

.curated-card:hover {
    border-color: var(--text-muted);
}

.curated-portal {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-variant: small-caps;
    letter-spacing: 0.07em;
    color: var(--text-faint);
}

.curated-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
}

/* Reset <button> to look like a card */
button.curated-card {
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

button.curated-card:hover {
    border-color: var(--text-muted);
}

.curated-desc {
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--text-muted);
    line-height: 1.45;
}