/* Public-page scale contract. Load last on the main site and copy unchanged
   to EEnotes with scripts/sync_homepage_ui.py. */
:root {
    --ui-canvas: #f5f7fa;
    --ui-surface: #ffffff;
    --ui-ink: #252b33;
    --ui-muted: #66717e;
    --ui-line: #e5e8ec;
    --ui-accent: #2865ad;
    --ui-accent-dark: #1d4e87;
    --ui-tint: #eaf1fa;
    --ui-radius: 12px;
    --ui-control-radius: 8px;
    --ui-width: 1120px;
    --ui-gutter: clamp(20px, 3vw, 40px);
    --ui-font: "Avenir Next", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --ui-shadow: 0 8px 28px rgb(32 57 88 / 5%);
    --ui-page-offset: 46px;
    --ui-page-top: calc(var(--public-nav-height) + var(--ui-page-offset));
    --content-page-top: var(--ui-page-top);
    --public-nav-height: 64px;
    --nav-height: var(--public-nav-height);
    --public-nav-paper: var(--ui-surface);
    --public-nav-panel: var(--ui-surface);
    --public-nav-ink: var(--ui-ink);
    --public-nav-accent: var(--ui-accent);
    --public-nav-line: var(--ui-line);
    --public-nav-gutter: max(var(--ui-gutter), calc((100% - var(--ui-width)) / 2));
}

html { font-size: 100%; scrollbar-gutter: stable; }
body { font-size: 14px; line-height: 1.8; }
.landing-nav, .landing-nav.is-scrolled {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid #e7eaee !important;
    font-family: var(--ui-font) !important;
}
.landing-brand, .landing-brand:hover { font-size: 18px !important; font-weight: 600 !important; }
.landing-nav-links a, .landing-nav-links a:hover, .landing-nav-links a:visited {
    font-size: 14px !important; font-weight: 450 !important;
}
.landing-nav-links a::after { height: 1px !important; bottom: 3px !important; }
.academic-layout { padding-top: var(--ui-page-top); }
.ui-directory-page > .content-section { padding-top: var(--ui-page-top) !important; }
.ui-booking-page > .page { padding-top: var(--ui-page-top) !important; }
.blog-index-page .blog-page { padding-top: var(--ui-page-top); }
.messages-page .messages-main { margin-top: var(--ui-page-top); }

@media (min-width: 901px) {
    .landing-nav-links { gap: clamp(20px, 2.2vw, 32px) !important; }
}
@media (min-width: 1180px) {
    :root { --ui-width: 1500px; }
}
@media (max-width: 820px) {
    :root { --public-nav-height: 60px; }
    .landing-nav .landing-nav-links { background: var(--ui-surface) !important; }
    .landing-nav .landing-nav-links a { font-size: 15px !important; font-weight: 450 !important; }
}
@media (max-width: 700px) {
    :root { --ui-page-offset: 24px; }
}