/* ============================================================
   Andy Joe — personal site
   Minimal academic: serif display, clean sans body, b&w, airy
   ============================================================ */

/* self-hosted variable fonts (latin subset, SIL OFL) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    --bg:        #fdfdfc;
    --text:      #1b1b1b;
    --muted:     #565654;
    --faint:     #6b6b64;
    --rule:      #e6e6e1;
    --rule-soft: #f0f0eb;
    --link-underline: #cdcdc6;
    --avatar-ring: rgba(0, 0, 0, .06);
    --avatar-glow: rgba(0, 0, 0, .07);
    --selection:  #e4e2d9;

    /* type scale: body 1.125rem, then three meta steps */
    --fs-meta:  .95rem;   /* contact, authors, role terms */
    --fs-small: .875rem;  /* venue, pub links, footer */
    --fs-label: .78rem;   /* uppercase eyebrow labels */

    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --maxw: 48rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #161615;
        --text:      #e9e8e4;
        --muted:     #a3a29b;
        --faint:     #8b8a82;
        --rule:      #2e2e2b;
        --rule-soft: #232321;
        --link-underline: #4c4c46;
        --avatar-ring: rgba(255, 255, 255, .1);
        --avatar-glow: rgba(0, 0, 0, .35);
        --selection:  #3a3a34;
    }
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

p {
    margin: 0 0 1rem;
    text-wrap: pretty;
}

h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--selection); }

a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--link-underline);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s ease, color .15s ease;
}
a:hover { text-decoration-color: var(--text); }

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- shared width --- */
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- hero --- */
.hero {
    display: flex;
    align-items: center;
    gap: 1.85rem;
    margin: 3.5rem 0 0;
}
.avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--avatar-ring), 0 2px 10px var(--avatar-glow);
}
.name {
    font-family: var(--serif);
    font-size: 2.45rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
}
.role {
    margin: .45rem 0 0;
    font-size: 1rem;
    color: var(--muted);
}
.contact {
    margin: .7rem 0 0;
    font-size: var(--fs-meta);
    color: var(--muted);
}
.contact a { color: var(--muted); }
.contact a:hover { color: var(--text); }
.dot { color: var(--faint); margin: 0 .5rem; }

/* --- sections --- */
section {
    margin-top: 3rem;
    scroll-margin-top: 1.5rem;
}

.section-title {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 1.1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--rule);
}

.sub {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--faint);
    margin: 1.7rem 0 .7rem;
}

/* --- publications --- */
.pub {
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.sub + .pub { padding-top: .25rem; }
.pub:last-child { border-bottom: none; padding-bottom: 0; }
.pub > :last-child { margin-bottom: 0; }
.pub-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 .4rem;
}
.pub-authors {
    font-size: var(--fs-meta);
    color: var(--muted);
    margin: 0 0 .25rem;
}
.pub-authors .me { color: var(--text); font-weight: 600; }
.pub-venue {
    font-size: var(--fs-small);
    font-style: italic;
    color: var(--faint);
    margin: 0 0 .55rem;
}
.pub-links {
    font-size: var(--fs-small);
    letter-spacing: .01em;
}
.pub-links a { color: var(--muted); }
.pub-links a:hover { color: var(--text); }

/* --- teaching --- */
.course {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .7rem;
    margin: 1.7rem 0 .4rem;
    font-family: var(--sans);
    font-weight: 400;
}
.section-title + .course { margin-top: 1.3rem; }
.course-code {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--faint);
    white-space: nowrap;
}
.course-code:hover { color: var(--text); }
.course-name {
    font-size: var(--fs-meta);
    color: var(--muted);
}
.roles {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
}
.roles li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.roles li:last-child { border-bottom: none; }
.role-title { font-weight: 600; color: var(--text); }
.role-term {
    color: var(--faint);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- footer --- */
footer {
    margin-top: 3.75rem;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0 2.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: var(--fs-small);
    color: var(--faint);
}
footer a { color: var(--muted); }
.footer-icons {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
}
.footer-icons a {
    display: inline-flex;
    color: var(--muted);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-icons a:hover { color: var(--text); }
.footer-icons svg {
    fill: currentColor;
    display: block;
}

/* --- responsive --- */
@media (max-width: 34rem) {
    body { font-size: 1.06rem; }
    .hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.15rem;
        margin-top: 2.5rem;
    }
    .avatar { width: 108px; height: 108px; }
    .name { font-size: 2.05rem; }
    .section-title { font-size: 1.4rem; }
    .roles li { flex-direction: column; gap: .1rem; }
}