/* =========================================================== Homepage — editorial layout Used only by _layouts/home.html (the rest of the site keeps the Minimal Mistakes theme untouched). =========================================================== */ :root { --bg: #faf9f5; --bg-warm: #f4f2ea; --card: #fffefb; --ink: #191917; --ink-2: #45443e; --ink-3: #85837a; --line: #e4e1d7; --line-soft: #eeece4; --accent: #b8532c; --accent-2: #9a4322; --accent-bg: rgba(184, 83, 44, .07); --shadow: 0 8px 20px rgba(60, 45, 30, .13); --topbar-bg: rgba(250, 249, 245, .82); --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nav-h: 58px; } /* Dark theme — set on before first paint by the inline script. Falls back to the OS preference when the visitor has no stored choice. */ :root[data-theme="dark"] { --bg: #161512; --bg-warm: #1e1d19; --card: #201f1b; --ink: #f3f0e8; --ink-2: #cbc7bb; --ink-3: #918d81; --line: #33312b; --line-soft: #292722; --accent: #e08a62; --accent-2: #eda57f; --accent-bg: rgba(224, 138, 98, .1); --shadow: 0 8px 22px rgba(0, 0, 0, .45); --topbar-bg: rgba(22, 21, 18, .84); } :root[data-theme="dark"] .portrait-media img, :root[data-theme="dark"] .member img, :root[data-theme="dark"] .pub-thumb img { filter: brightness(.92) saturate(.95); } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.home { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.home img { max-width: 100%; } body.home [hidden] { display: none !important; } body.home ::selection { background: var(--accent-bg); color: var(--ink); } body.home :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* Reveal on scroll — only when JS is running, and never when the visitor asked for reduced motion. */ html.js .reveal { opacity: 0; transform: translateY(14px); } html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } body.home *, body.home *::before, body.home *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body.home a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(184, 83, 44, .32); transition: color .15s ease, border-color .15s ease, background-color .15s ease; } body.home a:hover { color: var(--accent); border-bottom-color: var(--accent); } .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--topbar-bg); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-soft); } .topbar-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { font-family: var(--serif); font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); border: 0 !important; white-space: nowrap; } .brand:hover { color: var(--accent); } .navlinks { display: flex; align-items: center; gap: 1.6rem; font-size: .82rem; letter-spacing: .04em; overflow-x: auto; scrollbar-width: none; } .navlinks::-webkit-scrollbar { display: none; } .navlinks a { color: var(--ink-3); border: 0 !important; white-space: nowrap; padding: .3rem 0; position: relative; } .navlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .navlinks a:hover { color: var(--ink); } .navlinks a:hover::after, .navlinks a.is-active::after { transform: scaleX(1); } .navlinks a.is-active { color: var(--ink); } /* Theme toggle */ .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } /* ---------- Hero ---------- */ .hero { padding: 5.5rem 0 4rem; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4.5rem; align-items: start; } .eyebrow { display: flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1.4rem; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; color: var(--ink); margin: 0 0 1.5rem; text-wrap: balance; } .h1-suffix { color: var(--ink-3); font-size: .42em; letter-spacing: 0; vertical-align: .42em; margin-left: .1em; } .hero-lead { font-size: 1.12rem; line-height: 1.62; color: var(--ink-2); max-width: 40em; margin: 0 0 1.1rem; text-wrap: pretty; } .hero-lead strong { color: var(--ink); font-weight: 600; } .hero-sub { font-size: 1rem; line-height: 1.65; color: var(--ink-3); max-width: 40em; margin: 0 0 2.2rem; } /* Photo */ .portrait { position: relative; } .portrait-media { position: relative; z-index: 0; } .portrait-media img { display: block; width: 100%; border-radius: 4px; filter: saturate(.96); } .portrait-media::after { /* offset editorial frame */ content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--accent); opacity: .5; border-radius: 4px; z-index: -1; } .portrait-caption { margin: 1.1rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--ink-3); } .portrait-caption a { border-bottom-color: var(--line); } /* Buttons */ .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } body.home a.btn { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 500; padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--line) !important; background: var(--card); color: var(--ink-2); } body.home a.btn:hover { border-color: var(--accent) !important; color: var(--accent); background: var(--accent-bg); } body.home a.btn-solid { background: var(--ink); border-color: var(--ink) !important; color: var(--bg); } body.home a.btn-solid:hover { background: var(--accent); border-color: var(--accent) !important; color: #fff; } .actions-note { font-size: .78rem; color: var(--ink-3); } /* ---------- Sections ---------- */ .section { padding: 4.2rem 0; border-top: 1px solid var(--line-soft); scroll-margin-top: var(--nav-h); } .section-head { margin-bottom: 2.4rem; } .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin: 0; } .section-head p { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-3); } /* ---------- About: label / text rows ---------- */ .rows { border-top: 1px solid var(--line-soft); } .row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 3rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line-soft); } .row-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: .35rem; } .row-body { font-size: .98rem; line-height: 1.72; color: var(--ink-2); } .row-body p { margin: 0 0 .8rem; } .row-body p:last-child { margin-bottom: 0; } .row-body strong { color: var(--ink); font-weight: 600; } /* interest keywords */ .keywords { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .keywords li { font-size: .8rem; color: var(--ink-2); background: var(--bg-warm); border-radius: 999px; padding: .3rem .85rem; } /* ---------- News ---------- */ .news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); } .news li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 3rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); font-size: .96rem; line-height: 1.6; } .news-date { font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .3rem; white-space: nowrap; } .news li strong { color: var(--ink); font-weight: 600; } .news .mark { color: var(--accent); font-weight: 600; } details.more { margin-top: 1.6rem; } details.more > summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; font-size: .84rem; font-weight: 500; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1.05rem; transition: all .16s ease; } details.more > summary:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } details.more > summary::-webkit-details-marker { display: none; } details.more > summary::after { content: "↓"; font-size: .8rem; } details.more[open] > summary::after { content: "↑"; } details.more[open] > summary .closed { display: none; } details.more:not([open]) > summary .open { display: none; } details.more .news { border-top: 0; margin-top: 1.2rem; } /* ---------- Team ---------- */ .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2.4rem 1.5rem; align-items: start; } .member { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .member a { border: 0 !important; } .member img { width: 104px; height: 104px; flex: none; object-fit: cover; border-radius: 50%; background: var(--bg-warm); transition: transform .2s ease, box-shadow .2s ease; } .member a:hover img { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(60, 45, 30, .13); } .member-name { margin-top: .85rem; font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.35; min-height: 2.7em; } .member-role { margin-top: auto; font-size: .76rem; color: var(--ink-3); } /* ---------- Publications ---------- */ /* Filter bar */ .filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin: 0 0 .6rem; } .filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chip { font-family: inherit; font-size: .82rem; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .38rem .95rem; cursor: pointer; transition: all .16s ease; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); } /* Kept in the DOM for screen-reader announcements, but not shown: a visible count would read as a career total, which this selection is not. */ .filter-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pubs { border-top: 1px solid var(--line-soft); } .pub { display: grid; grid-template-columns: 58px 220px minmax(0, 1fr); gap: 0 2rem; align-items: start; padding: 1.9rem 1rem; margin: 0 -1rem; border-bottom: 1px solid var(--line-soft); border-radius: 6px; transition: background-color .18s ease; } .pub:hover { background: var(--bg-warm); } .pub[hidden] { display: none; } .pub-year { font-size: .8rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; padding-top: .15rem; } .pub-thumb { border-radius: 4px; overflow: hidden; background: var(--bg-warm); line-height: 0; } .pub-thumb img { width: 100%; height: auto; display: block; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } .pub:hover .pub-thumb img { transform: scale(1.035); } .pub-title { font-family: var(--serif); font-weight: 500; font-size: 1.24rem; line-height: 1.28; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .5rem; text-wrap: pretty; } .pub-title a { border: 0 !important; color: var(--ink); } .pub-title a:hover { color: var(--accent); } .pub-authors { margin: 0 0 .55rem; font-size: .89rem; line-height: 1.6; color: var(--ink-3); } .pub-authors strong { color: var(--ink); font-weight: 600; } .pub-authors a { color: var(--ink-3); border-bottom-color: var(--line); } .pub-authors a:hover { color: var(--accent); border-bottom-color: var(--accent); } .pub-venue { margin: 0 0 .75rem; font-size: .82rem; color: var(--ink-3); } .venue { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: var(--accent); } .venue-full { font-style: italic; } .venue-detail { color: var(--ink-3); } /* Venue rating: GGS class for conferences, quartile for journals. The scale name comes from data-scale, so a badge never claims a rating system it does not belong to. */ .rank { font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: .1rem .38rem; white-space: nowrap; } .rank[data-scale]::before { content: attr(data-scale) " "; color: var(--ink-3); font-weight: 500; } .dot { padding: 0 .5rem; color: var(--line); } .pub-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; } .pub-links a { font-size: .82rem; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 1px; } .pub-links a:hover { color: var(--accent); border-bottom-color: var(--accent); } .pub-links a + a { margin-left: 0; } .pub-links a:not(:last-child)::after { content: "·"; color: var(--ink-3); padding: 0 .55rem; border: 0; display: inline-block; } /* badges */ .badge { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 3px; vertical-align: 4px; white-space: nowrap; font-family: var(--sans); } .badge-new { color: #fff; background: var(--accent); } .badge-oral { color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(184,83,44,.28); } .badge-award { color: #7a5b12; background: rgba(196, 160, 48, .16); border: 1px solid rgba(196, 160, 48, .38); text-transform: none; letter-spacing: .01em; font-size: .7rem; } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--line-soft); padding: 3rem 0 4rem; font-size: .84rem; color: var(--ink-3); } .foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; } .foot a { color: var(--ink-3); border-bottom-color: var(--line); } .foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 3rem; } .row, .news li { grid-template-columns: 130px minmax(0, 1fr); gap: 0 2rem; } .pub { grid-template-columns: 46px 180px minmax(0, 1fr); gap: 0 1.5rem; } } @media (max-width: 720px) { body.home { font-size: 16px; } .wrap { padding: 0 22px; } .hero { padding: 3.2rem 0 2.6rem; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } .portrait { max-width: 190px; order: -1; } .portrait::after { inset: 10px -10px -10px 10px; } .section { padding: 3rem 0; } .section-head h2 { font-size: 1.7rem; } .row, .news li { grid-template-columns: minmax(0, 1fr); gap: .35rem; } .row-label, .news-date { padding-top: 0; } .pub { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.6rem 0; margin: 0; } .pub-thumb { max-width: 360px; } .pub-title { font-size: 1.15rem; } .pub-year { padding-top: 0; font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--accent); } .team { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.8rem 1rem; } .member img { width: 88px; height: 88px; } .filters { justify-content: flex-start; } } /* ---------- Print ---------- */ @media print { .topbar, .theme-toggle, .filters, .portrait, details.more > summary { display: none !important; } body.home { background: #fff; color: #000; font-size: 10.5pt; } .section { padding: 1.2rem 0; border-top: 0; } .pub { break-inside: avoid; padding: .7rem 0; margin: 0; } .pub-thumb { display: none; } .pub { grid-template-columns: 46px minmax(0, 1fr); } body.home a { color: #000; border: 0; } details.more[open], details.more { display: block; } html.js .reveal { opacity: 1 !important; transform: none !important; } }