/* Shared public-site system — loaded after page-specific styles. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root {
    --sans: "Manrope", Arial, sans-serif;
    --serif: "Manrope", Arial, sans-serif;
    --site-gutter: 24px;
    --page-top: 150px;
    --page-bottom: 90px;
}

html, body, button, input, textarea, select {
    font-family: var(--sans) !important;
}

/* The header is deliberately identical everywhere. */
.site-header { position: relative; z-index: 1000; padding-top: 22px; }
.navbar {
    position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
    z-index: 10000; width: min(calc(100% - 48px), 960px); height: 58px;
    padding: 0 13px 0 25px; display: flex; align-items: center;
}
.brand { font-family: var(--sans) !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.5px !important; }
.nav-links { gap: 28px !important; }
.nav-links a { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -0.1px !important; }
.mobile-menu a { font-family: var(--sans) !important; font-size: 15px !important; font-weight: 600 !important; }

/* Common type scale. */
.content h1, .contact-content h1, .notes-header h1, .projects-hero h1,
.project-detail-title, .article-title, .project-state h1 {
    font-family: var(--sans) !important; font-size: clamp(48px, 6vw, 68px) !important;
    font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.04em !important;
}
.content h2, .project-item h2, .projects-message h2, .project-detail-content h2,
.article-content h2 {
    font-family: var(--sans) !important; font-size: 40px !important;
    font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.03em !important;
}
.project-detail-content h3, .article-content h3, .note-card h2 {
    font-family: var(--sans) !important; font-size: 28px !important;
    font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important;
}
.content p, .notes-header p, .note-card p, .projects-hero p, .project-item p,
.projects-message p, .project-detail-intro, .project-detail-content p,
.project-detail-content li, .article-excerpt, .article-content, .article-content li,
.contact-content p {
    font-family: var(--sans) !important; font-size: 16px !important; line-height: 1.76 !important;
}
.large-text, .article-excerpt, .project-detail-intro, .projects-hero p { font-size: 17px !important; }
.eyebrow, .note-card-category, .project-number, .project-detail-label,
.project-meta-label, .article-meta, .project-explore-title {
    font-family: var(--sans) !important; font-size: 13px !important; font-weight: 700 !important;
}

/* Shared page rhythm and readable content widths. */
.notes-page, .projects-hero, .project-detail-hero { padding: var(--page-top) var(--site-gutter) var(--page-bottom) !important; }
.article-page { padding: var(--page-top) var(--site-gutter) var(--page-bottom) !important; }
.notes-container, .projects-hero .content, .project-detail-content, .article-container,
.projects-loading, .projects-message, .back-home, .project-back, .project-state { max-width: 690px !important; }
.notes-header { margin-bottom: 64px !important; }
.note-card, .project-item { padding: 34px 0 !important; }
.article-header { margin-bottom: 52px !important; }
.project-detail-content section { margin-bottom: 56px !important; }

/* Buttons and text actions use one treatment. */
.contact-button, .text-link, .project-link, .article-back, .project-explore-links a {
    font-family: var(--sans) !important; font-size: 14px !important; font-weight: 700 !important;
    line-height: 1.35 !important;
}
.contact-button { padding: 11px 20px !important; border-radius: 999px !important; }

@media (max-width: 700px) {
    :root { --site-gutter: 20px; --page-top: 108px; --page-bottom: 64px; }
    .navbar { top: 16px; width: calc(100% - 36px); height: 56px; padding: 0 7px 0 18px; }
    .brand { font-size: 19px !important; }
    .mobile-menu { top: 80px; width: calc(100% - 36px); }
    .content h1, .contact-content h1, .notes-header h1, .projects-hero h1,
    .project-detail-title, .article-title, .project-state h1 { font-size: clamp(42px, 12vw, 52px) !important; }
    .content h2, .project-item h2, .projects-message h2, .project-detail-content h2,
    .article-content h2 { font-size: 32px !important; }
    .project-detail-content h3, .article-content h3, .note-card h2 { font-size: 24px !important; }
    .content p, .notes-header p, .note-card p, .projects-hero p, .project-item p,
    .projects-message p, .project-detail-intro, .project-detail-content p,
    .project-detail-content li, .article-excerpt, .article-content, .article-content li,
    .contact-content p { font-size: 15.5px !important; }
    .large-text, .article-excerpt, .project-detail-intro, .projects-hero p { font-size: 16px !important; }
    .notes-header { margin-bottom: 48px !important; }
    .article-header { margin-bottom: 42px !important; }
}