/* The "Orbit" look (chosen by Mara on 23 October 2026). A burgundy-to-violet band with
   the art blended in carries the hero and page heads, a slow orbit ring turns behind
   the hero, dated lists run along a glowing thread, and cards carry their art or logo
   in the background. Light and dark. */
:root {
    --bg: #faf7f8;
    --surface: #ffffff;
    --text: #221a1e;
    --muted: #615559;
    --rule: #e8dfe2;
    --accent: #a61c41;
    --accent-2: #9e5090;
    --accent-soft: #f6e6ec;
    --thread: rgba(166, 28, 65, 0.3);
    --band: linear-gradient(120deg, rgba(166, 28, 65, 0.86) 0%, rgba(118, 42, 112, 0.74) 55%, rgba(34, 16, 44, 0.82) 100%);
    --shadow: 0 12px 34px rgba(60, 20, 40, 0.12);
    --radius: 16px;
    --font-head: 'Fraunces', Georgia, serif;
    --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    --font-ui: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141016;
        --surface: #201a22;
        --text: #efe8ec;
        --muted: #b7abb1;
        --rule: #372d36;
        --accent: #ef87a1;
        --accent-2: #d6a0cf;
        --accent-soft: #35222d;
        --thread: rgba(239, 135, 161, 0.35);
        --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
    .logo-on-light { display: none !important; }
    .logo-on-dark { display: block !important; }
    .to-top { color: #1b1218; }
}

body { font-size: 1.12rem; }
h1 { font-size: 3rem; font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: 2rem; color: var(--text); position: relative; padding-bottom: 0.6rem; }
h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s ease; }
section:hover > h2::after, h2:hover::after { width: 110px; }

/* Links: no line at rest, a thick offset underline on hover */
main a { text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color 0.25s, color 0.2s; }
main a:hover { text-decoration-color: currentColor; }
.card, .buttons a, .links a, .pub-title, a.card * { text-decoration: none !important; }

/* Header */
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.brand { font-size: 1.35rem; }
.site-header nav a { font-weight: 600; }

/* Hero: a full-bleed band, art blended in, an orbit ring turning behind. The portrait
   column stretches to the height of the text beside it (cropped to fit), and the link
   pills run on one full-width row below. */
main { padding-top: 0; }
.hero { grid-template-columns: 300px 1fr; column-gap: 2.6rem; row-gap: 1.6rem; align-items: stretch; padding: 4.5rem 0 4rem; color: #fff; margin-bottom: 1rem; }
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    background: var(--band), var(--img) center / cover no-repeat;
}
.hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 620px;
    height: 620px;
    right: -430px;
    top: 50%;
    margin-top: -310px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(circle at 50% 0, #fff 0 5px, rgba(255, 255, 255, 0.35) 6px, transparent 14px);
    animation: orbit 60s linear infinite;
    pointer-events: none;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.hero img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 60px rgba(166, 28, 65, 0.5);
}
.hero .pitch, .hero p { color: #fff; }
.hero strong { color: #f6e6ec; }
.theme strong { color: var(--text); }
.page-head .page-intro strong { color: #f6e6ec; }
/* Name in the light pink, subtitle and role in a deeper pink, for a layered look
   against the white body text */
.hero h1 { color: #f6e6ec; text-shadow: 0 3px 0 rgba(166, 28, 65, 0.45), 0 0 34px rgba(246, 230, 236, 0.22); }
.hero .subtitle { font-family: var(--font-head); font-size: 1.55rem; font-weight: 400; line-height: 1.3; margin: -0.1rem 0 0.35rem; color: #e8b4c8; text-shadow: 0 2px 0 rgba(166, 28, 65, 0.4); }
.hero .role { color: #e8b4c8; }
.hero a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.hero .links { grid-column: 1 / -1; margin: 0; gap: 0.5rem; }
.links a { color: #fff; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.2s, color 0.2s; }
.links a:hover { background: #fff; color: var(--accent); }
.links i, .links a:hover i { color: inherit; }
@media (max-width: 640px) {
    .hero { padding: 2.5rem 0 3rem; }
    .hero { grid-template-columns: 1fr; }
    .hero img { width: 200px; height: auto; min-height: 0; }
}

/* Page heads: the same band, shorter */
.page-head { padding: 3.6rem 0 2.6rem; margin-bottom: 1.5rem; color: #fff; }
.page-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; background: var(--band), var(--img) center / cover no-repeat; }
.page-head h1, .page-head p { color: #fff; }
.page-head a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }

/* Dated lists run along a glowing thread */
.news, main .dated:not(.compact) { border-left: 2px solid var(--thread); padding-left: 1.5rem; margin-left: 0.3rem; }
.news li, main .dated:not(.compact) li { position: relative; border-bottom: 0; padding: 0.45rem 0 0.85rem; }
.news li::before, main .dated:not(.compact) li::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: 0.95rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg), 0 0 12px var(--accent);
    transition: transform 0.25s;
}
.news li:hover::before, main .dated:not(.compact) li:hover::before { transform: scale(1.35); }
.news time, main .dated .when { font-family: var(--font-head); font-size: 1rem; color: var(--accent); }

/* Lists shown as cards (upcoming talks, courses, outreach) */
main .as-cards .dated, main .as-cards .plain { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; border: 0; padding: 0; margin: 0; list-style: none; }
main .as-cards .dated li, main .as-cards .plain li {
    display: block;
    margin: 0;
    padding: 1.1rem 1.25rem 1.2rem;
    border: 1px solid var(--rule);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s;
}
main .as-cards .dated li:hover, main .as-cards .plain li:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(60, 20, 40, 0.2); border-top-color: var(--accent-2); }
main .as-cards .dated li::before { display: none; }
.wide-dates .dated li { grid-template-columns: 14rem 1fr; }
@media (max-width: 640px) { .wide-dates .dated li { grid-template-columns: 1fr; } }
.as-cards .when { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--accent); margin-bottom: 0.3rem; }
.as-cards .what { display: block; }

/* Research cards: full art, titles level across the row */
.card { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 48px rgba(60, 20, 40, 0.22); }
.card-art { min-height: 340px; padding-top: 150px; border: 0; }
.card-art::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20, 8, 20, 0) 10%, rgba(20, 8, 20, 0.6) 38%, rgba(20, 8, 20, 0.9) 70%); transition: opacity 0.4s; }
.card-art::before { filter: saturate(1.1); }
.card-art:hover::before { transform: scale(1.1); }
.card-art:hover::after { opacity: 0.85; }
.card-art h3, .card-art p { color: #fff; }
.card-art h3 { font-size: 1.5rem; }
.card-art > h3::after { content: " \2192"; font-family: var(--font-ui); opacity: 0; display: inline-block; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; }
.card-art:hover > h3::after { opacity: 1; transform: none; }

/* Code cards: the logo fills the card, faint, behind the text (the wide ZEPHYRUS
   wordmark sits high so it does not run behind the title) */
.card-code { min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.card-code .card-logo, .card-code .card-logo-zephyrus {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.8rem;
    object-fit: contain;
    opacity: 0.13;
    transform: scale(1.1);
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.card-code .card-logo-zephyrus { object-position: center 18%; }
.card-code:hover .card-logo { opacity: 0.26; transform: scale(1.18) rotate(-3deg); }
.card-code h3 { font-size: 1.5rem; }

/* Codes page: logo on a gradient tile */
.code { border-bottom: 1px solid var(--rule); }
.code:last-of-type { border-bottom: 0; }
.code .visual { width: 200px; height: 200px; background: var(--band); border-radius: var(--radius); padding: 1.4rem; align-items: center; box-shadow: var(--shadow); }
.code .visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); transition: transform 0.4s ease; }
.code:hover .visual img { transform: scale(1.06) rotate(-3deg); }
.code .visual .logo-on-light { display: none !important; }
.code .visual .logo-on-dark { display: block !important; }
.code h3 { font-size: 1.9rem; }
.buttons a { background: var(--accent); color: #fff; transition: background 0.2s, transform 0.2s; }
.buttons a:hover { background: var(--accent-2); transform: translateY(-2px); }
@media (prefers-color-scheme: dark) { .buttons a { color: #1b1218; } }

/* Research page: a wide art banner opens each theme */
.theme { padding-top: 0; }
.theme::before { content: ""; display: block; position: relative; height: 170px; margin-top: 2.2rem; border-radius: var(--radius); background: linear-gradient(90deg, rgba(20, 8, 20, 0.55), rgba(20, 8, 20, 0.05)), var(--img) center / cover no-repeat; box-shadow: var(--shadow); }
.theme h3 { margin-top: 1.2rem; font-size: 1.8rem; }

/* Publications: each paper a quiet card that slides on hover */
.pubs { padding-left: 2.8rem; }
.pubs li { margin-bottom: 0.7rem; padding: 0.85rem 1.1rem; border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 12px; background: var(--surface); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.pubs li:last-child { border-bottom: 1px solid var(--rule); }
.pubs li:has(.tag-first) { border-left-color: var(--accent); }
.pubs li:hover { transform: translateX(4px); box-shadow: var(--shadow); border-left-color: var(--accent-2); }
.pubs li::marker { font-family: var(--font-head); color: var(--accent); }
.pub-title { color: var(--text); }
.pub-title:hover { color: var(--accent); }
.tag-first { color: #fff; background: var(--accent); }
@media (prefers-color-scheme: dark) { .tag-first { color: #1b1218; } }