/* Shared typography. Edit these tokens to tune every page together.
   Inter: headings, reading text and controls. IBM Plex Mono: technical metadata. */
:root {
    --font-sans: "Inter", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;
    --type-display: clamp(44px, 5.5vw, 88px);
    --type-page: clamp(36px, 4.2vw, 60px);
    --type-feature: clamp(32px, 4.2vw, 60px);
    --type-section: clamp(24px, 2.4vw, 30px);
    --type-project: clamp(20px, 2vw, 24px);
    --type-card: clamp(16px, 1.5vw, 20px);
    --type-body: 16px;
    --type-small: 14px;
    --type-caption: 12px;
    --type-label: 11px;
    --theme-text: #242526;
    --theme-muted: #626466;
    --theme-accent: #b43e35;
    --type-on-dark: #ecece8;
    --type-muted-on-dark: #b7bbba;
    --type-signal: #ff8077;
}

:root[data-theme="dark"] {
    --theme-text: #f0eeeb;
    --theme-muted: #bbbdbb;
    --theme-accent: #ff8077;
}

body,
[data-theme] body,
[data-theme] .page-wrap {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--theme-muted);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.035em;
    color: var(--theme-text);
}

h1 { font-size: var(--type-page); }
h2 { font-size: var(--type-feature); }
h3 { font-size: var(--type-section); }
h4 { font-size: var(--type-project); }
h5 { font-size: 18px; letter-spacing: -.02em; }
h6 { font-size: var(--type-small); letter-spacing: 0; }

a { color: var(--theme-accent); }
a:hover { color: var(--theme-accent); }
strong, b { font-weight: 600; }

.page-title__title,
.about-heading .page-title__title {
    font-size: var(--type-page);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.045em;
}

.page-title__text,
.blog-heading h5 {
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--theme-muted);
}

.about-page .about__title,
.contact-inquiry > h2,
.contact-details > h2,
.blog-year__title,
.title__title,
.post-detail__title {
    font-size: var(--type-section);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.035em;
    text-transform: none;
}

.about-page .about__text,
.landing-intro__copy p,
.contact-primary__email,
.contact-primary__secondary,
.contact-detail {
    font-size: var(--type-body);
    line-height: 1.7;
}

.blog-post__copy > h5,
.wil-content .awe-section h5 {
    font-size: var(--type-project);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.03em;
}

.blog-post__copy > h6,
.wil-content .awe-section h6,
.year-wheel__label,
.blog-page .year-wheel__year,
.contact-primary h3,
.contact-detail h3,
.portfolio-gallery .work__year {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: .02em;
}

.blog-post__copy > h6,
.wil-content .awe-section h6 {
    font-size: var(--type-caption);
    line-height: 1.6;
    color: var(--theme-muted);
}

.contact-primary h3,
.contact-detail h3,
.year-wheel__label {
    font-size: var(--type-label);
    line-height: 1.6;
    letter-spacing: .08em;
    color: var(--theme-text);
}

.blog-page .year-wheel__year { opacity: .8; }
.blog-page .year-wheel__year[aria-current="true"] { font-weight: 500; }

.about-page .tool-card h3 {
    font-size: var(--type-small);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
}

.about-page .tool-card p {
    font-size: var(--type-caption);
    line-height: 1.6;
    color: var(--theme-muted);
}

.contact-section-note,
.contact-form__hint,
.contact-form__status,
.contact-field label,
.contact-field label span,
.contact-detail__label {
    font-size: var(--type-small);
    line-height: 1.6;
}

.contact-page #contact-form input,
.contact-page #contact-form textarea { font-size: var(--type-body); }
.contact-page #contact-form ::placeholder { color: var(--theme-muted); opacity: 1; }

.md-btn,
.contact-submit,
.landing-page .landing-link {
    font-size: var(--type-small);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
}

.md-btn--outline-primary {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.md-btn--outline-primary:hover {
    background-color: var(--theme-accent);
    color: var(--theme-background);
}

/* Navigation and collaborator headings use the same scale on every page. */
.overlay-menu ul li a {
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.035em;
    color: var(--type-on-dark);
}
.overlay-menu ul li.active > a,
.overlay-menu ul li a:hover { color: var(--type-signal); }

.collaborators-title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.025em;
    text-transform: none;
}
.footer__coppy,
.footer p { font-size: var(--type-small); line-height: 1.6; color: var(--theme-muted); }

/* Preserve the landing composition; raise tiny metadata to a readable minimum. */
.landing-page .featured-project .featured-project__title { font-size: var(--type-display); }
.landing-page .landing-intro h1 {
    font-size: clamp(44px, 7.4vw, 106px);
    line-height: 1.05;
    letter-spacing: -.055em;
}
.landing-page .landing-next h2 { font-size: var(--type-feature); }
.landing-page .archive-heading h2 { font-size: clamp(32px, 4vw, 52px); }

.landing-page .landing-kicker,
.featured-project__topline a,
.featured-project__meta dt,
.archive-status,
.landing-loader__frame,
.landing-loader__footer,
.landing-loader__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1.6;
    font-weight: 400;
}

.featured-project__meta { font-size: var(--type-small); }
.featured-project__topline,
.featured-project__meta dt,
.featured-project__footer p,
.landing-next .landing-kicker,
.landing-loader__frame,
.landing-loader__footer,
.landing-loader__eyebrow,
.landing-loader__message { color: var(--type-muted-on-dark); }

.featured-project__footer p,
.landing-loader__message { font-size: var(--type-small); line-height: 1.7; }
.archive-status { color: var(--theme-muted); }

.work-filters button {
    font-size: var(--type-caption);
    color: var(--theme-muted);
    opacity: 1;
}
.work-filters button[aria-pressed="true"],
.work-filters button:hover { color: var(--theme-text); }

.work__title,
.portfolio-gallery .work__title {
    font-size: var(--type-card);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.25;
    text-transform: none;
}
.work__text,
.portfolio-gallery .work__role,
.portfolio-gallery .work__year,
.portfolio-gallery .work__text { font-size: var(--type-caption); line-height: 1.5; }

.hoverbox.light .hb_back { color: var(--theme-muted); }
.hoverbox.light .hb_back .work__title { color: var(--theme-text); }
#loading-text { color: var(--theme-accent) !important; font-size: var(--type-small); line-height: 1.7; }

@media (max-width: 600px) {
    .featured-project__topline { flex-wrap: wrap; gap: 8px 16px; }
    .landing-loader__footer { gap: 12px; }
}