/* basic */

/* variant */
[data-v="basic"] {
    --bg: hsl(var(--h), 16%, 10%);
    --fg: #fafafa;
    --muted: #a1a1aa;
    --muted-2: #71717a;
    --border: #27272a;
    color-scheme: dark;
}

[data-v="basic"] body {
    font-size: 0.9375rem;
    line-height: 1.6;
}

[data-v="basic"] .site-nav,
[data-v="basic"] main,
[data-v="basic"] .site-footer {
    max-width: 34rem;
}

[data-v="basic"] a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--muted-2);
    text-underline-offset: 3px;
}

[data-v="basic"] a:hover {
    text-decoration-color: hsl(var(--h) 50% 50%);
    color: hsl(var(--h) 100% 50%);
}

/* nav */
[data-v="basic"] .site-nav {
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 3.5rem;
    padding-bottom: 1.5rem;
    border-bottom: none;
}

[data-v="basic"] .nav-mark img {
    display: none;
}

[data-v="basic"] .site-nav nav {
    gap: 0.5rem;
}

[data-v="basic"] .site-nav nav a::before {
    content: "/ ";
    color: var(--muted-2);
    display: inline-block;
    margin-right: 0.5rem;
    text-decoration: none;
}

[data-v="basic"] .site-nav nav a.nav-btn {
    background: #18181b;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

[data-v="basic"] .site-nav nav a.nav-btn::before {
    display: none;
}

[data-v="basic"] .site-nav nav a.nav-btn:hover {
    background-color: hsl(var(--h, 210), 80%, 55%);
    color: #000;
    opacity: 1;
}

/* main */
[data-v="basic"] .hero {
    padding: 0 0 2.25rem;
    text-align: left;
}

[data-v="basic"] .hero-name {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

[data-v="basic"] .hero-bio {
    margin: 0;
    color: var(--fg);
}

[data-v="basic"] .social-links {
    justify-content: flex-start;
    gap: 0.875rem;
    margin-top: 0.75rem;
}

[data-v="basic"] .social-links a {
    font-size: 1rem;
    text-decoration: none;
}

[data-v="basic"] .work h2 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fg);
    text-underline-offset: 3px;
    margin-bottom: 1.25rem;
}

[data-v="basic"] .work-item {
    padding: 0 0 1.75rem;
    border-bottom: none;
}

[data-v="basic"] .work-item h3 {
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-v="basic"] .work-item-link i {
    display: none;
}

[data-v="basic"] .work-code {
    font-size: var(--text-xs);
    color: var(--muted);
}

[data-v="basic"] .work-item p {
    margin-top: 0.375rem;
    max-width: 44ch;
}

/* footer */
[data-v="basic"] .site-footer {
    align-items: flex-start;
    text-align: left;
    border-top: none;
    padding-top: 1rem;
}

/* meta */
[data-v="basic"] .footer-meta {
    justify-content: flex-start;
}