:root {
    --paper: #f6f3ed;
    --ink: #25232b;
    --muted: #625f59;
    --accent: #33312d;
    --line: #ddd8d0;
}

html, body {
    background: var(--paper);
    color: var(--ink);
}

#about, .content-section h2, .content-section p,
.about-content p, #about-videos > p, .about-playlist h2 {
    color: var(--ink);
}

.about-content h1, .about-content h2 {
    color: var(--ink);
    letter-spacing: -0.04em;
}

.about-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.ces-headshot {
    border-color: white;
    box-shadow: 0 3px 16px #25232b12;
}

.nav-button, .social-link, .contact-button {
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--line);
}

.nav-button.active, .nav-button:hover,
.social-link:hover, .contact-button:hover {
    color: var(--accent);
    background: #e9e5de;
    border-color: #c9c2b7;
    box-shadow: none;
    transform: none;
}

.nav-button::before, .social-link::before, .contact-button::before {
    display: none;
}

.ces-email-button {
    background: var(--ink) !important;
    color: white;
    border-color: var(--ink);
}

.ces-email-button:hover {
    background: #45423d !important;
    color: white;
    transform: none;
}

#buttons.sticky {
    background: #f6f3edf2;
    box-shadow: 0 3px 18px #25232b14;
}

.ces-nav-link, .project a {
    color: var(--accent);
}

.ces-nav-link:hover, .project a:hover {
    color: #151411;
}

.section-intro {
    max-width: 1240px;
    margin: 0 auto 40px;
    padding: 20px clamp(20px, 5vw, 60px);
}

.section-intro h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.045em;
    margin: 10px 0 16px;
}

.section-intro p {
    color: var(--muted);
    line-height: 1.6;
}

.project, #about-videos .project {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 20px !important;
}

.project:hover {
    transform: none;
}

.project h3 {
    margin-bottom: 0;
    color: var(--ink);
    text-shadow: none;
    width: 100%;
    letter-spacing: -0.025em;
}

.project .info-line, .project .description {
    color: var(--muted);
    line-height: 1.5;
}

.project .info-line {
    gap: 3px 10px;
    margin-bottom: 6px;
}

.project .description {
    margin-bottom: 0;
}

.project .links {
    margin-top: 6px;
    gap: 6px 12px;
}

.project img {
    border-radius: 8px;
    box-shadow: none;
}

.project:hover img {
    transform: none;
}

.project a::after {
    background: var(--accent);
}

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}