/* ============================================================ Personal site — typography-first. Palette and scale live here; everything else derives from it. ============================================================ */ /* A cool near-white is the default. The dark theme is opt-in via data-theme on , set before first paint by the inline script in base.html. */ :root { color-scheme: light; --bg: #fbfcfe; --ink: #16191f; --muted: #525b68; /* 4.68:1 on --bg. The smallest text on the site uses this, so it has to clear WCAG AA on its own; src/check.py asserts the ratio for both palettes. */ --faint: #687384; --rule: #dfe4ea; --accent: #204f7a; --mark: #eef2f6; --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, ui-serif, serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --measure: 40rem; /* reading width for prose */ --wrap-max: 40rem; /* container width; the homepage widens this */ --rail: 18rem; --gutter: 3.5rem; --step--1: 0.875rem; --step-0: 1.125rem; --step-1: 1.3rem; --step-2: 1.6rem; --step-3: 2.1rem; } [data-theme="dark"] { color-scheme: dark; --bg: #11151a; --ink: #e7ebf0; --muted: #a6afb9; --faint: #8e99a6; --rule: #2a3139; --accent: #8fbae3; --mark: #1b222a; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: var(--step-0); line-height: 1.65; font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color 160ms ease, color 160ms ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 1.5rem; } /* The homepage runs two columns, so it gets a wider container than the prose pages. */ body.home { --wrap-max: 64rem; } /* ---------- Links ---------- */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); transition: text-decoration-color 120ms ease; } a:hover { text-decoration-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Off-screen until focused, so a keyboard user can jump the nav. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 0.5rem 0.85rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px; font-family: var(--mono); font-size: 0.8rem; text-decoration: none; } .skip-link:focus { left: 0.75rem; top: 0.75rem; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rule); } .nav__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0.7rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.15rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; } .nav__inner a { color: var(--muted); text-decoration: none; text-transform: lowercase; } .nav__inner a:hover { color: var(--accent); } .nav__home { color: var(--ink) !important; font-weight: 600; } /* ---------- Theme toggle ---------- */ .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, transform 160ms ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } [data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Overrides the inline-flex above, so the button stays hidden without JavaScript. */ .theme-toggle[hidden] { display: none; } /* ---------- Masthead ---------- */ .masthead { display: flex; align-items: center; gap: 1.4rem; padding: 3.5rem 0 0; } .masthead__portrait, .masthead__monogram { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; object-fit: cover; } .masthead__monogram { display: grid; place-items: center; background: var(--mark); color: var(--faint); font-size: 1.9rem; letter-spacing: 0.02em; border: 1px solid var(--rule); } .masthead__name { margin: 0; font-size: var(--step-3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } .masthead__role { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--step--1); line-height: 1.5; } /* The one sentence a visitor should leave with, so it sits above the biography and reads a step larger than the prose around it. */ .thesis { margin: 1.4rem 0 0; font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; } .thesis__detail { display: block; margin-top: 0.45rem; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.025em; line-height: 1.5; text-wrap: balance; } /* ---------- Two-column homepage ---------- */ .layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--gutter); align-items: start; } /* Both columns start at the same height so "News" lines up with the portrait. */ .layout > * { padding-top: 3.5rem; } .layout .section:first-child { margin-top: 0; } /* The rail stays in view while the longer body scrolls. On a short viewport it gets its own scroll area; without the height bound, a sticky rail taller than the viewport hides its bottom until the right column reaches the page end. */ .rail { position: sticky; top: 2.75rem; max-height: calc(100vh - 2.75rem); max-height: calc(100svh - 2.75rem); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; -ms-overflow-style: none; font-size: 0.95rem; } .rail::-webkit-scrollbar { display: none; } .rail .section { margin: 2.25rem 0; } .rail .masthead { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-top: 0; } /* The rail is only 18rem, so the thesis steps down from --step-1 to stay a comfortable measure rather than breaking into two-word lines. */ .rail .thesis { margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.5; } .rail .lede { font-size: 1rem; line-height: 1.6; } .rail .contact { grid-template-columns: 1fr; gap: 0.1rem; font-size: 0.9rem; } .rail .contact dd { margin-bottom: 0.55rem; } .rail .contact dd:last-child { margin-bottom: 0; } @media (max-width: 62rem) { .layout { grid-template-columns: 1fr; gap: 0; } .layout > * + * { padding-top: 0; } .rail { position: static; max-height: none; overflow-y: visible; overscroll-behavior-y: auto; scrollbar-width: auto; -ms-overflow-style: auto; font-size: var(--step-0); max-width: var(--measure); } .rail .masthead { flex-direction: row; align-items: center; gap: 1.4rem; } /* Single column: the thesis takes the emphasis and the lede returns to body size, so there is one enlarged line rather than two competing for it. */ .rail .thesis { font-size: var(--step-1); } .rail .lede { font-size: var(--step-0); } .rail .contact { grid-template-columns: 6rem 1fr; gap: 0.5rem 1rem; } } /* ---------- Sections ---------- */ .section { margin: 3.25rem 0; } .section > h2 { margin: 0 0 1.1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); } .lede { font-size: var(--step-1); line-height: 1.55; } .section p { margin: 0 0 1rem; } .section p:last-child { margin-bottom: 0; } .section__more { margin-top: 1.4rem; font-size: var(--step--1); } /* A one-line gloss under a section heading, e.g. the venue breadth above the papers. */ .section__note { margin: -0.3rem 0 1.2rem; color: var(--muted); font-size: var(--step--1); } /* ---------- Featured research ---------- */ .thread { margin-bottom: 2.6rem; } .thread:last-child { margin-bottom: 0; } .thread__label { margin: 0 0 0.4rem; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .thread__blurb { margin: 0 0 0.9rem; max-width: var(--measure); color: var(--muted); line-height: 1.55; text-wrap: pretty; } .thread__highlight { margin: 0 0 0.9rem; padding: 0.85rem 0.95rem; border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--mark) 70%, var(--bg)); } .thread__highlight-venue { display: inline-block; padding: 0.16rem 0.36rem; border-radius: 3px; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.35; text-transform: uppercase; } .thread__highlight-title { margin: 0.45rem 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.4; } .thread__highlight-title a { color: var(--ink); text-decoration: none; } .thread__highlight-title a:hover { color: var(--accent); text-decoration: underline; } .thread__contribution { margin: 0.35rem 0 0; font-size: 0.96rem; line-height: 1.55; text-wrap: pretty; } .thread__highlight .pub__links { margin-top: 0.5rem; } .thread__related-label { margin: 0.9rem 0 0.45rem; color: var(--faint); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .thread__papers { margin: 0; padding: 0; list-style: none; } /* Same venue gutter as the publication list, so the two read as one system. Chips here carry a year, and talks name their venue too, so the column is sized for the longest of those — "Tutorial @ CIKM 2026" — to keep it on one line. */ .thread__papers li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0 1rem; margin-bottom: 0.55rem; font-size: 0.98rem; line-height: 1.5; } .thread__papers li:last-child { margin-bottom: 0; } /* A talk's venue and date, since its chip carries the kind rather than the venue. */ .thread__detail { display: block; font-size: 0.8rem; color: var(--faint); line-height: 1.4; } .thread__venue { align-self: start; justify-self: stretch; text-align: center; margin-top: 0.18rem; padding: 0.2rem 0.3rem; border-radius: 3px; background: var(--mark); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); /* A talk chip names its venue too ("Tutorial @ CIKM 2026"), which can outrun the gutter, so these wrap rather than spilling into the title column. */ line-height: 1.35; overflow-wrap: break-word; } /* ---------- News ---------- */ .news { margin: 0; padding: 0; list-style: none; } .news li { display: grid; grid-template-columns: 5rem 1fr; gap: 0 1.1rem; margin-bottom: 0.6rem; font-size: 0.98rem; line-height: 1.55; } .news li:last-child { margin-bottom: 0; } .news__when { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); padding-top: 0.32rem; white-space: nowrap; } /* In news, work titles (em) and venues (strong) both read bold rather than italic. */ .news__what em, .news__what strong { font-style: normal; font-weight: 600; color: var(--ink); } .news__what a em, .news__what a strong { color: inherit; } /* ---------- Publications ---------- */ .year-group { margin-bottom: 1.5rem; } .year-group:last-child { margin-bottom: 0; } /* The year is a disclosure control, so it needs to look pressable without turning into a button. Hairline rule and a chevron; the count tells you what is inside while it is shut. */ .year-group__label { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; } .year-group__label::-webkit-details-marker { display: none; } .year-group__label::after { content: ""; width: 0.32rem; height: 0.32rem; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.1rem) rotate(45deg); transition: transform 0.15s ease; } .year-group[open] > .year-group__label::after { transform: translateY(0.05rem) rotate(225deg); } @media (prefers-reduced-motion: reduce) { .year-group__label::after { transition: none; } } .year-group__label:hover { color: var(--accent); } .year-group__label:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* A heading for the outline's sake, but it sits inline in the summary row. */ .year-group__year { margin: 0; font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; } .year-group__count { font-weight: 400; font-size: 0.74rem; color: var(--faint); } .year-group__body { padding-top: 0.9rem; } /* Venue acronym sits in its own gutter so the list can be scanned by conference. */ .pub { display: grid; /* Wide enough for the longest acronym, OPT@NeurIPS, without wrapping. */ grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0 1rem; margin-bottom: 1.35rem; } .pub:last-child { margin-bottom: 0; } .pub__tag { /* Without align-self the chip is a grid item that stretches to the row height, which turned it into a tall bar next to multi-line entries. */ align-self: start; justify-self: stretch; text-align: center; margin-top: 0.3rem; padding: 0.2rem 0.3rem; border-radius: 3px; background: var(--mark); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.35; text-transform: uppercase; color: var(--ink); cursor: help; max-width: 100%; overflow-wrap: break-word; } .pub__badges { margin: 0.25rem 0 0; } .pub__badges .pub__note { margin: 0 0.35rem 0 0; } .pub__title { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--ink); text-decoration: none; } a.pub__title:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .pub__authors { margin: 0.15rem 0 0; font-size: 0.94rem; color: var(--muted); line-height: 1.5; } .pub__authors .me { color: var(--ink); font-weight: 600; } .pub__note { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: var(--mark); font-family: var(--mono); font-style: normal; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .pub__links { margin: 0.3rem 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.01em; } .pub__links a { margin-right: 0.7rem; } /* ---------- Talks ---------- */ .talk-group { margin-bottom: 1.9rem; } .talk-group:last-child { margin-bottom: 0; } .talk-group__label { margin: 0 0 0.7rem; font-size: 1rem; font-weight: 600; } .talk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .talk-cards + .talk { margin-top: 1.25rem; } .talk-card { min-width: 0; } .talk-card__image { position: relative; display: block; overflow: hidden; border: 1px solid var(--rule); border-radius: 5px; background: var(--mark); text-decoration: none; } .talk-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.88); transition: filter 160ms ease, transform 160ms ease; } .talk-card__image:hover img { filter: saturate(1); transform: scale(1.015); } .talk-card__play { position: absolute; inset: 50% auto auto 50%; width: 2.5rem; height: 2.5rem; border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); box-shadow: 0 1px 5px color-mix(in srgb, var(--ink) 18%, transparent); transform: translate(-50%, -50%); } .talk-card__play::after { content: ""; position: absolute; top: 50%; left: 53%; border-top: 0.34rem solid transparent; border-bottom: 0.34rem solid transparent; border-left: 0.52rem solid currentColor; transform: translate(-40%, -50%); } .talk-card__title { margin: 0.65rem 0 0; font-size: 0.98rem; font-weight: 600; line-height: 1.35; } .talk-card__title a { color: var(--ink); text-decoration: none; } .talk-card__title a:hover { color: var(--accent); text-decoration: underline; } .talk-card__where { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .talk-card__where span { margin-left: 0.25rem; color: var(--faint); font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; } .talk-card__links { margin-top: 0.35rem; } @media (prefers-reduced-motion: reduce) { .talk-card__image img { transition: none; } .talk-card__image:hover img { transform: none; } } .talk { margin-bottom: 1.1rem; } .talk:last-child { margin-bottom: 0; } .talk__title { font-size: 1rem; font-weight: 600; line-height: 1.4; } .talk__where { margin: 0.1rem 0 0; font-size: 0.92rem; color: var(--muted); } .talk__where .talk__date { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); } .talk__views { color: var(--faint); cursor: help; } /* ---------- Writing preview ---------- */ .writing-preview { margin: 0; padding: 0; list-style: none; } .writing-preview li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0 1.1rem; margin-bottom: 0.85rem; } .writing-preview li:last-child { margin-bottom: 0; } .writing-preview__when { padding-top: 0.24rem; color: var(--faint); font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; } .writing-preview__title { display: block; color: var(--ink); font-size: 0.98rem; font-weight: 600; line-height: 1.4; text-decoration: none; } .writing-preview__title:hover { color: var(--accent); text-decoration: underline; } .writing-preview__outlet { display: block; margin-top: 0.05rem; color: var(--muted); font-size: 0.82rem; } /* ---------- Experience ---------- */ .role { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1.1rem; margin-bottom: 1.3rem; } .role:last-child { margin-bottom: 0; } .role__when { font-family: var(--mono); font-size: 0.76rem; color: var(--faint); padding-top: 0.28rem; white-space: nowrap; } .role__what { font-weight: 600; } .role__org { color: var(--muted); } .role__note { margin: 0.1rem 0 0; font-size: 0.94rem; color: var(--muted); line-height: 1.55; } /* ---------- Mentors ---------- */ .mentor { margin-bottom: 1rem; font-size: 0.98rem; line-height: 1.6; } .mentor:last-child { margin-bottom: 0; } .mentor__name { font-weight: 600; } .mentor__note { display: block; color: var(--muted); font-size: 0.94rem; } /* ---------- Contact ---------- */ .contact { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem 1rem; font-size: 0.96rem; } /* "Program committees" does not fit the 6rem label column of the Elsewhere list. */ .contact--wide { grid-template-columns: 11rem 1fr; } .contact__note { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .contact dt { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding-top: 0.2rem; } /* Long URLs must not push the narrow rail wider than its column. */ .contact dd { margin: 0; overflow-wrap: break-word; } /* ---------- Post / blog listing ---------- */ .postlist { margin: 0; padding: 0; list-style: none; } .postlist li { margin-bottom: 1.5rem; } .postlist__date { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); } .postlist__title { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; } .postlist__title:hover { color: var(--accent); } .postlist__summary { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.96rem; } /* Names the publication a piece appeared in, so an external link is obvious before the click. */ .postlist__where { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.92rem; } .postlist__outlet { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint); } .post__header { padding: 3rem 0 0; } /* The header's padding and the section's margin were stacking into a ~6rem void between the intro line and the first entry. */ .post__header + .section { margin-top: 1.75rem; } .post__title { margin: 0.4rem 0 0; font-size: var(--step-2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .post__date { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); } .prose { margin: 2rem 0 0; } .prose h2 { margin: 2.2rem 0 0.6rem; font-size: var(--step-1); font-weight: 600; line-height: 1.3; } .prose h3 { margin: 1.8rem 0 0.5rem; font-size: 1.1rem; font-weight: 600; } .prose p { margin: 0 0 1.15rem; } .prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; } .prose li { margin-bottom: 0.35rem; } .prose blockquote { margin: 1.4rem 0; padding-left: 1.1rem; border-left: 2px solid var(--rule); color: var(--muted); font-style: italic; } .prose img { max-width: 100%; height: auto; border-radius: 3px; } .prose hr { margin: 2.2rem 0; border: 0; border-top: 1px solid var(--rule); } .prose table { width: 100%; margin: 0 0 1.3rem; border-collapse: collapse; font-size: 0.94rem; } .prose th, .prose td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: left; } .prose th { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); } code, kbd, samp { font-family: var(--mono); font-size: 0.86em; } .prose :not(pre) > code { padding: 0.1em 0.35em; border-radius: 3px; background: var(--mark); } .prose pre { margin: 0 0 1.3rem; padding: 0.9rem 1rem; overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; background: var(--mark); font-size: 0.84rem; line-height: 1.55; } .prose pre code { background: none; padding: 0; font-size: inherit; } .prose .codehilite { margin: 0 0 1.3rem; } .prose .codehilite pre { margin: 0; } /* ---------- Footer ---------- */ .footer { margin: 4rem 0 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.72rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; } .footer a { color: var(--faint); } /* ---------- Small screens ---------- */ @media (max-width: 40rem) { :root { --step-0: 1.06rem; --step-3: 1.7rem; } .masthead, .rail .masthead { gap: 1rem; } .layout > * { padding-top: 2.5rem; } .layout > * + * { padding-top: 0; } .masthead__portrait, .masthead__monogram { width: 72px; height: 72px; flex-basis: 72px; } .role, .news li, .writing-preview li { grid-template-columns: 1fr; gap: 0.1rem; } .pub, .thread__papers li { grid-template-columns: 1fr; gap: 0.3rem; } /* One column, so the chip becomes a compact pill above the title rather than a full-width band of colour. */ .pub__tag, .thread__venue { justify-self: start; margin-top: 0; padding-left: 0.4rem; padding-right: 0.4rem; } .role__when, .news__when, .writing-preview__when { padding-top: 0; } .news li { margin-bottom: 0.9rem; } .talk-cards { grid-template-columns: 1fr; } .contact, .rail .contact { grid-template-columns: 1fr; gap: 0.15rem; } .contact dd, .rail .contact dd { margin-bottom: 0.5rem; } } /* ---------- Print: homepage becomes a clean CV ---------- */ @media print { /* Also matches :root[data-theme] so printing is monochrome whichever theme is active. */ :root, :root[data-theme] { color-scheme: light; --bg: #fff; --ink: #000; --muted: #333; --faint: #555; --rule: #ccc; --accent: #000; --mark: #fff; } .nav, .footer, .section__more, .skip-link { display: none; } body { font-size: 10.5pt; line-height: 1.4; } .wrap { max-width: none; padding: 0; } /* A printed CV reads as one column. */ .layout { display: block; } .layout > *, .layout > * + * { padding-top: 0; } .rail { position: static; max-height: none; overflow: visible; font-size: inherit; } .masthead { padding-top: 0; } /* rem sizes are unchanged by the 10.5pt body, so the thesis is set in em to stay proportionate on paper instead of towering over the text. */ .thesis, .rail .thesis { margin: 0.5rem 0 0; font-size: 1.1em; } .section { margin: 1.2rem 0; page-break-inside: avoid; } .pub, .role, .talk, .mentor, .thread { page-break-inside: avoid; } /* A collapsed year would print as a heading with nothing under it, which would quietly drop papers from a printed CV. Browsers that support ::details-content get it from CSS alone; the beforeprint handler in base.html covers the rest. */ .year-group::details-content { content-visibility: visible; } .year-group__label { border-bottom: none; padding: 0; cursor: auto; } .year-group__label::after, .year-group__count { display: none; } .year-group__body { padding-top: 0.4rem; } a { text-decoration: none; } .pub__links a::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #666; } } /* ---- syntax highlighting (generated) ---- */ pre { line-height: 125%; } td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; } span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } .codehilite .hll { background-color: #ffffcc } .codehilite { background: #f0f0f0; } .codehilite .c { color: #60A0B0; font-style: italic } /* Comment */ .codehilite .err { border: 1px solid #F00 } /* Error */ .codehilite .k { color: #007020; font-weight: bold } /* Keyword */ .codehilite .o { color: #666 } /* Operator */ .codehilite .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */ .codehilite .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */ .codehilite .cp { color: #007020 } /* Comment.Preproc */ .codehilite .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */ .codehilite .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */ .codehilite .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */ .codehilite .gd { color: #A00000 } /* Generic.Deleted */ .codehilite .ge { font-style: italic } /* Generic.Emph */ .codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */ .codehilite .gr { color: #F00 } /* Generic.Error */ .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */ .codehilite .gi { color: #00A000 } /* Generic.Inserted */ .codehilite .go { color: #888 } /* Generic.Output */ .codehilite .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */ .codehilite .gs { font-weight: bold } /* Generic.Strong */ .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ .codehilite .gt { color: #04D } /* Generic.Traceback */ .codehilite .kc { color: #007020; font-weight: bold } /* Keyword.Constant */ .codehilite .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */ .codehilite .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */ .codehilite .kp { color: #007020 } /* Keyword.Pseudo */ .codehilite .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */ .codehilite .kt { color: #902000 } /* Keyword.Type */ .codehilite .m { color: #40A070 } /* Literal.Number */ .codehilite .s { color: #4070A0 } /* Literal.String */ .codehilite .na { color: #4070A0 } /* Name.Attribute */ .codehilite .nb { color: #007020 } /* Name.Builtin */ .codehilite .nc { color: #0E84B5; font-weight: bold } /* Name.Class */ .codehilite .no { color: #60ADD5 } /* Name.Constant */ .codehilite .nd { color: #555; font-weight: bold } /* Name.Decorator */ .codehilite .ni { color: #D55537; font-weight: bold } /* Name.Entity */ .codehilite .ne { color: #007020 } /* Name.Exception */ .codehilite .nf { color: #06287E } /* Name.Function */ .codehilite .nl { color: #002070; font-weight: bold } /* Name.Label */ .codehilite .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */ .codehilite .nt { color: #062873; font-weight: bold } /* Name.Tag */ .codehilite .nv { color: #BB60D5 } /* Name.Variable */ .codehilite .ow { color: #007020; font-weight: bold } /* Operator.Word */ .codehilite .w { color: #BBB } /* Text.Whitespace */ .codehilite .mb { color: #40A070 } /* Literal.Number.Bin */ .codehilite .mf { color: #40A070 } /* Literal.Number.Float */ .codehilite .mh { color: #40A070 } /* Literal.Number.Hex */ .codehilite .mi { color: #40A070 } /* Literal.Number.Integer */ .codehilite .mo { color: #40A070 } /* Literal.Number.Oct */ .codehilite .sa { color: #4070A0 } /* Literal.String.Affix */ .codehilite .sb { color: #4070A0 } /* Literal.String.Backtick */ .codehilite .sc { color: #4070A0 } /* Literal.String.Char */ .codehilite .dl { color: #4070A0 } /* Literal.String.Delimiter */ .codehilite .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */ .codehilite .s2 { color: #4070A0 } /* Literal.String.Double */ .codehilite .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */ .codehilite .sh { color: #4070A0 } /* Literal.String.Heredoc */ .codehilite .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */ .codehilite .sx { color: #C65D09 } /* Literal.String.Other */ .codehilite .sr { color: #235388 } /* Literal.String.Regex */ .codehilite .s1 { color: #4070A0 } /* Literal.String.Single */ .codehilite .ss { color: #517918 } /* Literal.String.Symbol */ .codehilite .bp { color: #007020 } /* Name.Builtin.Pseudo */ .codehilite .fm { color: #06287E } /* Name.Function.Magic */ .codehilite .vc { color: #BB60D5 } /* Name.Variable.Class */ .codehilite .vg { color: #BB60D5 } /* Name.Variable.Global */ .codehilite .vi { color: #BB60D5 } /* Name.Variable.Instance */ .codehilite .vm { color: #BB60D5 } /* Name.Variable.Magic */ .codehilite .il { color: #40A070 } /* Literal.Number.Integer.Long */ pre { line-height: 125%; } td.linenos .normal { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; } span.linenos { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; } [data-theme="dark"] .codehilite .hll { background-color: #3B4252 } [data-theme="dark"] .codehilite { background: #2E3440; color: #D8DEE9 } [data-theme="dark"] .codehilite .c { color: #616E87; font-style: italic } /* Comment */ [data-theme="dark"] .codehilite .err { color: #BF616A } /* Error */ [data-theme="dark"] .codehilite .esc { color: #D8DEE9 } /* Escape */ [data-theme="dark"] .codehilite .g { color: #D8DEE9 } /* Generic */ [data-theme="dark"] .codehilite .k { color: #81A1C1; font-weight: bold } /* Keyword */ [data-theme="dark"] .codehilite .l { color: #D8DEE9 } /* Literal */ [data-theme="dark"] .codehilite .n { color: #D8DEE9 } /* Name */ [data-theme="dark"] .codehilite .o { color: #81A1C1; font-weight: bold } /* Operator */ [data-theme="dark"] .codehilite .x { color: #D8DEE9 } /* Other */ [data-theme="dark"] .codehilite .p { color: #ECEFF4 } /* Punctuation */ [data-theme="dark"] .codehilite .ch { color: #616E87; font-style: italic } /* Comment.Hashbang */ [data-theme="dark"] .codehilite .cm { color: #616E87; font-style: italic } /* Comment.Multiline */ [data-theme="dark"] .codehilite .cp { color: #5E81AC; font-style: italic } /* Comment.Preproc */ [data-theme="dark"] .codehilite .cpf { color: #616E87; font-style: italic } /* Comment.PreprocFile */ [data-theme="dark"] .codehilite .c1 { color: #616E87; font-style: italic } /* Comment.Single */ [data-theme="dark"] .codehilite .cs { color: #616E87; font-style: italic } /* Comment.Special */ [data-theme="dark"] .codehilite .gd { color: #BF616A } /* Generic.Deleted */ [data-theme="dark"] .codehilite .ge { color: #D8DEE9; font-style: italic } /* Generic.Emph */ [data-theme="dark"] .codehilite .ges { color: #D8DEE9; font-weight: bold; font-style: italic } /* Generic.EmphStrong */ [data-theme="dark"] .codehilite .gr { color: #BF616A } /* Generic.Error */ [data-theme="dark"] .codehilite .gh { color: #88C0D0; font-weight: bold } /* Generic.Heading */ [data-theme="dark"] .codehilite .gi { color: #A3BE8C } /* Generic.Inserted */ [data-theme="dark"] .codehilite .go { color: #D8DEE9 } /* Generic.Output */ [data-theme="dark"] .codehilite .gp { color: #616E88; font-weight: bold } /* Generic.Prompt */ [data-theme="dark"] .codehilite .gs { color: #D8DEE9; font-weight: bold } /* Generic.Strong */ [data-theme="dark"] .codehilite .gu { color: #88C0D0; font-weight: bold } /* Generic.Subheading */ [data-theme="dark"] .codehilite .gt { color: #BF616A } /* Generic.Traceback */ [data-theme="dark"] .codehilite .kc { color: #81A1C1; font-weight: bold } /* Keyword.Constant */ [data-theme="dark"] .codehilite .kd { color: #81A1C1; font-weight: bold } /* Keyword.Declaration */ [data-theme="dark"] .codehilite .kn { color: #81A1C1; font-weight: bold } /* Keyword.Namespace */ [data-theme="dark"] .codehilite .kp { color: #81A1C1 } /* Keyword.Pseudo */ [data-theme="dark"] .codehilite .kr { color: #81A1C1; font-weight: bold } /* Keyword.Reserved */ [data-theme="dark"] .codehilite .kt { color: #81A1C1 } /* Keyword.Type */ [data-theme="dark"] .codehilite .ld { color: #D8DEE9 } /* Literal.Date */ [data-theme="dark"] .codehilite .m { color: #B48EAD } /* Literal.Number */ [data-theme="dark"] .codehilite .s { color: #A3BE8C } /* Literal.String */ [data-theme="dark"] .codehilite .na { color: #8FBCBB } /* Name.Attribute */ [data-theme="dark"] .codehilite .nb { color: #81A1C1 } /* Name.Builtin */ [data-theme="dark"] .codehilite .nc { color: #8FBCBB } /* Name.Class */ [data-theme="dark"] .codehilite .no { color: #8FBCBB } /* Name.Constant */ [data-theme="dark"] .codehilite .nd { color: #D08770 } /* Name.Decorator */ [data-theme="dark"] .codehilite .ni { color: #D08770 } /* Name.Entity */ [data-theme="dark"] .codehilite .ne { color: #BF616A } /* Name.Exception */ [data-theme="dark"] .codehilite .nf { color: #88C0D0 } /* Name.Function */ [data-theme="dark"] .codehilite .nl { color: #D8DEE9 } /* Name.Label */ [data-theme="dark"] .codehilite .nn { color: #8FBCBB } /* Name.Namespace */ [data-theme="dark"] .codehilite .nx { color: #D8DEE9 } /* Name.Other */ [data-theme="dark"] .codehilite .py { color: #D8DEE9 } /* Name.Property */ [data-theme="dark"] .codehilite .nt { color: #81A1C1 } /* Name.Tag */ [data-theme="dark"] .codehilite .nv { color: #D8DEE9 } /* Name.Variable */ [data-theme="dark"] .codehilite .ow { color: #81A1C1; font-weight: bold } /* Operator.Word */ [data-theme="dark"] .codehilite .pm { color: #ECEFF4 } /* Punctuation.Marker */ [data-theme="dark"] .codehilite .w { color: #D8DEE9 } /* Text.Whitespace */ [data-theme="dark"] .codehilite .mb { color: #B48EAD } /* Literal.Number.Bin */ [data-theme="dark"] .codehilite .mf { color: #B48EAD } /* Literal.Number.Float */ [data-theme="dark"] .codehilite .mh { color: #B48EAD } /* Literal.Number.Hex */ [data-theme="dark"] .codehilite .mi { color: #B48EAD } /* Literal.Number.Integer */ [data-theme="dark"] .codehilite .mo { color: #B48EAD } /* Literal.Number.Oct */ [data-theme="dark"] .codehilite .sa { color: #A3BE8C } /* Literal.String.Affix */ [data-theme="dark"] .codehilite .sb { color: #A3BE8C } /* Literal.String.Backtick */ [data-theme="dark"] .codehilite .sc { color: #A3BE8C } /* Literal.String.Char */ [data-theme="dark"] .codehilite .dl { color: #A3BE8C } /* Literal.String.Delimiter */ [data-theme="dark"] .codehilite .sd { color: #616E87 } /* Literal.String.Doc */ [data-theme="dark"] .codehilite .s2 { color: #A3BE8C } /* Literal.String.Double */ [data-theme="dark"] .codehilite .se { color: #EBCB8B } /* Literal.String.Escape */ [data-theme="dark"] .codehilite .sh { color: #A3BE8C } /* Literal.String.Heredoc */ [data-theme="dark"] .codehilite .si { color: #A3BE8C } /* Literal.String.Interpol */ [data-theme="dark"] .codehilite .sx { color: #A3BE8C } /* Literal.String.Other */ [data-theme="dark"] .codehilite .sr { color: #EBCB8B } /* Literal.String.Regex */ [data-theme="dark"] .codehilite .s1 { color: #A3BE8C } /* Literal.String.Single */ [data-theme="dark"] .codehilite .ss { color: #A3BE8C } /* Literal.String.Symbol */ [data-theme="dark"] .codehilite .bp { color: #81A1C1 } /* Name.Builtin.Pseudo */ [data-theme="dark"] .codehilite .fm { color: #88C0D0 } /* Name.Function.Magic */ [data-theme="dark"] .codehilite .vc { color: #D8DEE9 } /* Name.Variable.Class */ [data-theme="dark"] .codehilite .vg { color: #D8DEE9 } /* Name.Variable.Global */ [data-theme="dark"] .codehilite .vi { color: #D8DEE9 } /* Name.Variable.Instance */ [data-theme="dark"] .codehilite .vm { color: #D8DEE9 } /* Name.Variable.Magic */ [data-theme="dark"] .codehilite .il { color: #B48EAD } /* Literal.Number.Integer.Long */