/* bernardohummes.com: one centred column, a thesis figure on top, Young Serif titles over Inter text.
   The figure is the only colour; links are ink with a grey underline and turn indigo on hover.
   Fonts are self-hosted (static/fonts, made by tools/fetch-fonts.py); the stacks fall back if they are missing. */
:root {
  --bg: #fcfcfd; --ink: #16171d; --muted: #61646f; --rule: #e6e7ec; --accent: #3d4fd6;
  --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Young Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the figure keeps the thesis's colour language: red for agent a, blue for b, yellow for a section */
  --h-a: #e0531f; --h-b: #2f45d8; --h-sec: #f4c20d; --h-bad: #e5384f; --h-ok: #7ed957; --h-pill: #ececf1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1015; --ink: #e7e8ee; --muted: #9a9daa; --rule: #252731; --accent: #8a97ff;
          --h-a: #ff7a45; --h-b: #8a97ff; --h-sec: #e8b500; --h-bad: #ff5c72; --h-ok: #6cc94a; --h-pill: #23252f; }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* one column for text, figure and list: 38rem leaves about 35.5rem of text, roughly 63 to 70 characters a line */
.col { max-width: 38rem; margin: 0 auto; padding: 0 1.25rem; }
.top { max-width: 38rem; margin: 0 auto; padding: 1.5rem 1.25rem 0; text-align: center; font-size: .92rem; }
.top a { text-decoration: none; }
.foot { color: var(--muted); font-size: .8rem; text-align: center; padding-top: 4rem; padding-bottom: 2.5rem; }

/* titles in Young Serif, which has one weight: never ask for bold, or the browser fakes it */
.name, .section-title, .page-title, .pub-title, .top a { font-family: var(--display); font-weight: 400; }
.name, .page-title, .pub-title, .section-title { text-wrap: balance; }
.prose p, .pub-authors { text-wrap: pretty; }

/* the figure: redrawn from the thesis by tools/gen-figure.py, a link to the page it comes from */
.figure { margin: 2rem 0 0; }
.figure-link { display: block; text-decoration: none; border-radius: 6px; transition: opacity .2s; }
.figure-link:hover { opacity: .8; }
.hdr { display: block; width: 100%; height: auto; }
.h-pill { fill: var(--h-pill); }
.h-sec { fill: var(--h-sec); }
.h-bad { fill: var(--h-bad); }
.h-ok { fill: var(--h-ok); }
.h-path { fill: none; stroke: var(--ink); stroke-width: 1; }
.h-alt { stroke: var(--muted); stroke-width: 1; }
.h-dash { stroke: var(--muted); stroke-opacity: .5; stroke-width: .8; stroke-dasharray: 3 3; }
.h-map { fill: none; stroke: var(--muted); stroke-opacity: .6; stroke-width: .8; }
.h-base { stroke: var(--muted); stroke-width: 1; }
.h-cell { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }

/* name, role line, and the quiet link row */
.name { text-align: center; font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -.025em; line-height: 1.1; margin: 1.2rem 0 .4rem; }
.role { text-align: center; color: var(--muted); font-size: .9rem; text-wrap: balance; margin: 0 0 .7rem; }
.links-wrap { position: relative; margin: 0 0 2.5rem; }
.links { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0; font-size: .88rem; }
.links a, .links button { color: var(--muted); text-decoration: none; }
.links a:hover, .links button:hover { color: var(--accent); }
.links button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* the address, shown by the Email button in the gap under the row, so nothing on the page moves; fades out after 8 s */
.email-line { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; margin: 0; text-align: center; color: var(--ink);
              opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .3s, transform .3s, visibility .3s; }
.email-line.open { opacity: 1; visibility: visible; transform: none; }
.email-line .copied-note { display: inline-block; min-width: 3.5em; margin-left: .6rem; font-size: .78rem; color: var(--accent); text-align: left; }
.email-line math { font-size: 1.05em; }

.prose p { margin: 0 0 1em; }
.muted { color: var(--muted); font-size: .93rem; }
.section-title { font-size: 1.35rem; letter-spacing: -.01em; margin: 3.5rem 0 .6rem; }
#publications { scroll-margin-top: 1.5rem; }

/* the topic filter: plain words after a faint "Show:", the selected one in ink and underlined.
   The checked radio sits right before its label; hiding the other papers is done by rules generated in home.html */
.chips-row { display: flex; align-items: baseline; gap: .8rem; margin: 1.2rem 0 .5rem; }
.chips-lead { font-size: .88rem; color: var(--muted); opacity: .75; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; font-size: .88rem; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { cursor: pointer; user-select: none; color: var(--muted); }
.chips label:hover { color: var(--accent); }
.chips input:checked + label { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.chips input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* publications, dblp style: a type label in the margin, then authors, title, venue, links */
.pub-group { font-size: .78rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; font-family: var(--mono); margin: 2rem 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.pubs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.pub { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 .6rem; padding-top: .6rem; }
.pub-label { font-family: var(--mono); font-size: .78rem; padding-top: .12rem; }
.k-J { color: var(--h-b); }
.k-C { color: var(--h-a); }
.k-P, .k-T { color: var(--muted); }
.pub-authors { color: var(--muted); font-size: .86rem; }
.pub-authors .me { color: var(--ink); font-weight: 500; }
.pub-authors a { color: inherit; text-decoration: none; }
.pub-authors a:hover { color: var(--accent); }
.pub-title { display: block; color: var(--ink); line-height: 1.35; margin: .1rem 0; text-decoration: none; }
.pub-title:hover { color: var(--accent); }
.pub-when { font-size: .82rem; color: var(--muted); font-style: italic; }
.pub-links { margin-top: .25rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.pub-links > a, .pub-links summary { color: var(--muted); text-decoration: none; cursor: pointer; }
.pub-links > a:hover, .pub-links summary:hover { color: var(--accent); }
.pub-links details[open] { order: 1; flex-basis: 100%; margin: .5rem 0 0; }
.pub-links summary { display: inline; list-style: none; }
.pub-links summary::-webkit-details-marker { display: none; }
.pub-links details p { color: var(--ink); font-size: .92rem; }
pre { font-family: var(--mono); font-size: .74rem; white-space: pre-wrap; background: color-mix(in srgb, var(--rule) 50%, transparent); padding: .9rem; border-radius: 8px; }

/* co-author and paper pages */
.page-title { font-size: 2rem; letter-spacing: -.02em; line-height: 1.2; margin: 2.5rem 0 .5rem; text-align: center; }
.kicker { text-align: center; color: var(--muted); font-family: var(--mono); font-size: .8rem; margin: 3rem 0 0; }
.person-line, .page-title + .pub-authors { text-align: center; color: var(--muted); margin: 0; }
.person-links { text-align: center; margin: .8rem 0 2rem; font-size: .9rem; }
.person-links a { margin: 0 .6rem; }