/* v2 stylesheet — no framework. Tokens first, then layout, then components. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Institutional colours of the original site */
  --navy: #003366;          /* UniMi blue */
  --green: #009933;         /* site green: accents only (3.8:1 on white) */
  --green-text: #007a33;    /* same hue, darker: links and small text (5.5:1) */
  --green-hover: #005c26;

  --bg: #f7f9fc;
  --surface: #ffffff;
  --text: #1a2433;
  --heading: var(--navy);
  --muted: #546070;         /* 6.2:1 on --bg */
  --line: #dde3ec;
  --link: var(--green-text);
  --link-hover: var(--green-hover);
  --accent: var(--green);
  --navy-soft: #e6edf5;
  --green-soft: #e3f4e8;
  --tag-text: #00602a;

  /* chart series (validated: adjacent order conf | journal | other) */
  --series-conf: #009933;
  --series-journal: #2a78d6;
  --series-other: #eb6834;
  --node: var(--navy);
  --grid: #e6eaf0;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.07rem + .35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.22rem + .8vw, 1.8rem);
  --step-3: clamp(2rem, 1.55rem + 2.2vw, 3.2rem);

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1626;
    --surface: #11203a;
    --text: #e4e9f0;
    --heading: #ffffff;
    --muted: #9fb0c6;
    --line: #23344f;
    --link: #4cc77a;
    --link-hover: #8be0aa;
    --accent: #2fb862;
    --navy-soft: #16294a;
    --green-soft: #12352a;
    --tag-text: #8be0aa;
    --series-journal: #3987e5;
    --series-other: #d95926;
    --node: #8db8e8;
    --grid: #23344f;
  }
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-0)/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0; color: var(--heading); letter-spacing: -.01em; }
h1 { font-size: var(--step-3); letter-spacing: -.025em; }
h2 { font-size: var(--step-2); letter-spacing: -.02em; }
h3 { font-size: var(--step-0); font-weight: 600; }
p { margin: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

[hidden] { display: none !important; }
abbr[title] { text-decoration: none; cursor: help; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: .9em; }
.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .5rem 1rem; background: #fff; color: var(--navy); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Header: navy band with a green rule, as in the original site ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 4px solid var(--green);
  color: #fff;
}
.site-header :focus-visible { outline-color: #fff; }
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.75rem; flex-wrap: wrap;
}
.brand {
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
  color: #fff; text-decoration: none; margin-right: auto;
}
.brand:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; }

.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; gap: .25rem; }
.main-nav__toggle {
  display: block; padding: .5rem .75rem; border: 0; border-bottom: 3px solid transparent;
  background: none; color: #fff; font: inherit; font-weight: 500; cursor: pointer;
}
.main-nav__toggle:hover,
.has-sub:focus-within > .main-nav__toggle,
.main-nav__toggle[aria-expanded="true"] { border-bottom-color: var(--green); }

.has-sub { position: relative; }
.sub {
  position: absolute; left: 0; top: 100%; min-width: 17rem;
  padding: .4rem; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--green);
  box-shadow: 0 12px 30px rgba(0, 20, 50, .18);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover > .sub, .has-sub:focus-within > .sub,
[aria-expanded="true"] + .sub { opacity: 1; visibility: visible; transform: none; }
.sub__sep { height: 1px; margin: .35rem .75rem; background: var(--line); }
.sub a {
  display: block; padding: .45rem .75rem;
  color: var(--text); text-decoration: none; font-size: .95rem;
}
.sub a:hover { background: var(--green-soft); color: var(--text); }

.lang-switch { display: flex; gap: .15rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.lang-switch a { padding: .3rem .45rem; color: #c9d6e6; text-decoration: none; }
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lang-switch a[aria-current] { color: var(--navy); background: #fff; }

@media (max-width: 46rem) {
  .site-header__inner { gap: .25rem 1rem; padding-block: .4rem; }
  .main-nav { order: 3; width: 100%; margin-inline: -.75rem; }
  .main-nav, .main-nav > ul { position: relative; }
  .has-sub { position: static; }   /* menus span the width of the bar */
  .sub { right: 0; min-width: 0; }
}

/* Hero ------------------------------------------------------------------ */

.hero {
  background:
    radial-gradient(50rem 26rem at 90% -20%, var(--green-soft), transparent 70%),
    radial-gradient(40rem 24rem at 0% 120%, var(--navy-soft), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding-block: clamp(2rem, 6vw, 4.5rem);
}
.hero__portrait {
  width: clamp(8rem, 18vw, 12.5rem); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--surface), 0 0 0 8px var(--green), 0 18px 40px rgba(0, 51, 102, .22);
}
.hero__text { display: grid; gap: 1rem; max-width: 46rem; }
.hero__role { display: grid; gap: .1rem; color: var(--muted); font-size: 1.05rem; }
.hero__role a { color: inherit; text-decoration-color: var(--line); }
.hero__role a:hover { color: var(--link); text-decoration-color: currentColor; }
.hero__bio { font-size: var(--step-1); line-height: 1.55; color: var(--text); }

.contact { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.contact li { display: flex; align-items: center; gap: .45rem; }
.contact svg {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-block; padding: .3rem .8rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem;
}
.chip:hover { border-color: var(--green); color: var(--link); }

.cv { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cv__label { font-weight: 600; margin-right: .25rem; }
.btn {
  display: inline-block; padding: .4rem 1rem;
  background: var(--navy); color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem;
  box-shadow: inset 0 -3px 0 var(--green);
}
.btn:hover { background: #00264d; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: #fff; color: var(--navy); }
}

@media (max-width: 40rem) {
  .hero__inner { grid-template-columns: 1fr; justify-items: start; }
}

/* Home grid ------------------------------------------------------------- */

.home-grid {
  display: grid; gap: 1rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 60rem) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .home-aside { grid-column: 2; grid-row: 1; }
  .home-main { grid-column: 1; grid-row: 1; }
}

.block { margin-bottom: 3rem; }
.block > h2 { position: relative; padding-bottom: .6rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.block > h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 3rem; height: 3px; background: var(--green);
}
.more { margin-top: 1rem; font-weight: 600; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }
.meta { color: var(--muted); font-size: .9rem; }

.tag {
  display: inline-block; padding: .05rem .5rem; margin-left: .35rem;
  background: var(--green-soft); color: var(--tag-text); font: 600 .72rem/1.6 var(--sans);
  text-transform: uppercase; letter-spacing: .05em; vertical-align: .1em;
}

/* Aside cards */
.home-aside .block {
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy);
  padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
}
.home-aside .block > h2 { font-size: var(--step-1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-aside .block { border-top-color: var(--accent); }
}

.courses, .news, .areas, .projects, .pubs { list-style: none; margin: 0; padding: 0; }
.courses li { display: grid; gap: .1rem; padding-block: .6rem; }
.courses li + li { border-top: 1px dashed var(--line); }
.courses__name { font-weight: 600; text-decoration: none; color: var(--text); }
.courses__name:hover { color: var(--link); text-decoration: underline; }

.news li { padding-block: .8rem; }
.news li + li { border-top: 1px dashed var(--line); }
.news time { color: var(--muted); font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.news h3 { margin: .15rem 0 .25rem; font-size: 1rem; line-height: 1.35; color: var(--text); }
.news p { font-size: .9rem; color: var(--muted); }
/* news archive: full-size text, course tags link to the course */
.news--archive h3 { font-size: 1.05rem; }
.news--archive p { font-size: .95rem; color: var(--text); max-width: 52rem; }
a.tag--course { text-decoration: none; }
a.tag--course:hover { box-shadow: inset 0 0 0 1px var(--c); color: var(--text); }

/* News badges: the topic is tinted with its colour; the course is a neutral
   outline with a coloured square, like the section markers. */
.tag--research { --c: #003366; }
.tag--teaching { --c: #007a33; }
.tag--popularization { --c: #9a5b00; }
/* eight muted hues; courses taught in the same years get different ones */
.tag--AMD, .tag--SO { --c: #003366; }
.tag--SAD, .tag--LES { --c: #007a33; }
.tag--AMD-DSE, .tag--Sim { --c: #0f6e6e; }
.tag--LP, .tag--BDAT { --c: #8a5a00; }
.tag--P1, .tag--PAD { --c: #7a3b6e; }
.tag--ADLS, .tag--PGS { --c: #2f5d9e; }
.tag--SEI2, .tag--APDML { --c: #a03e2a; }
.tag--P3, .tag--DI { --c: #556b1a; }
:root { --tint: 12%; --ink: 0%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tint: 32%; --ink: 55%; } }
:root[data-theme="dark"] { --tint: 32%; --ink: 55%; }

.tag--topic { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); color: color-mix(in srgb, var(--c), #fff var(--ink)); }
.tag--course { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.tag--course::before {
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; vertical-align: .05em;
  background: color-mix(in srgb, var(--c), #fff var(--ink));
}

/* Research areas as a tile grid */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.areas a {
  display: flex; align-items: center; height: 100%; min-height: 4rem;
  padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--green);
  background: var(--surface);
  color: var(--text); text-decoration: none; font-weight: 500; line-height: 1.35;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.areas a:hover {
  transform: translateY(-2px); border-left-color: var(--navy);
  box-shadow: 0 8px 20px rgba(0, 51, 102, .12); color: var(--text);
}

.projects li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: .5rem; }
.projects__years { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Projects page */
.project-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.project-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding-block: .85rem; }
.project-list li + li { border-top: 1px dashed var(--line); }
.project-list__years { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-list h3 { margin: 0 0 .3rem; font-size: 1.02rem; line-height: 1.4; color: var(--text); }
.project-list .tag { margin-left: .25rem; }
.project-list .meta > .tag:first-child { margin-left: 0; }
@media (max-width: 36rem) { .project-list li { grid-template-columns: 1fr; gap: .1rem; } }

/* Publications */
.pub { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding-block: 1rem; }
.pub + .pub { border-top: 1px solid var(--line); }
.pub__year { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.pub__title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.pub__title a { color: var(--text); text-decoration: none; }
.pub__title a:hover { color: var(--link); text-decoration: underline; }
.pub__authors { margin-top: .25rem; font-size: .95rem; }
.pub__authors strong { font-weight: 650; color: var(--heading); }
.pub__venue { color: var(--muted); font-size: .95rem; }
.pub__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pub__links a {
  padding: .05rem .55rem; border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.pub__links a:hover { border-color: var(--green); background: var(--green-soft); }

/* Inner pages: title band ---------------------------------------------- */

.page-head {
  background:
    radial-gradient(50rem 22rem at 95% -40%, var(--green-soft), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
}
.page-head .wrap { display: grid; gap: .75rem; }
.page-head__lead { color: var(--muted); font-size: var(--step-1); }

.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: .9rem; }
.breadcrumb li + li::before { content: "/"; margin: 0 .5rem; color: var(--muted); }
.breadcrumb [aria-current] { color: var(--muted); }

/* Publications page ----------------------------------------------------- */

.pubs-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }

.filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filters { border-top-color: var(--accent); }
}
.field { display: grid; gap: .25rem; flex: 1 1 12rem; min-width: 0; }
.field--grow { flex: 1 1 18rem; }
.field label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field input, .field select {
  width: 100%; max-width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  padding: .45rem .6rem; background: var(--bg); border: 1px solid var(--line);
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.filters__count { margin-left: auto; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; padding-bottom: .5rem; }

.year-nav { margin-bottom: 1.5rem; }
.year-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.year-nav a {
  display: block; padding: .15rem .5rem; border: 1px solid var(--line); background: var(--surface);
  font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none;
}
.year-nav a:hover { border-color: var(--green); background: var(--green-soft); }

.year-group { margin-bottom: 2rem; }
.year-group > h2 {
  position: relative; padding-bottom: .4rem; font-variant-numeric: tabular-nums;
}
.year-group > h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 3rem; height: 3px; background: var(--green);
}

/* every entry draws its own top rule, so hidden (filtered) entries leave no gaps */
.pub--full { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.pub__venue cite a { color: inherit; }
.pub__venue cite a:hover { color: var(--link); }
.pub__links .tag { margin-left: 0; align-self: center; text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; }
.tag--type { background: var(--navy-soft); color: var(--navy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag--type { color: var(--heading); }
}
.pub:target { background: var(--green-soft); box-shadow: -1rem 0 0 var(--green-soft), 1rem 0 0 var(--green-soft); }

.no-results { padding: 2rem 0; color: var(--muted); }

/* Research areas page --------------------------------------------------- */

.areas--nav { margin-top: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.areas--nav a { min-height: 3.25rem; padding: .55rem .8rem; font-size: .92rem; }

.research-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.research-page > section + section { margin-top: 3rem; }
.section-title {
  position: relative; padding-bottom: .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 3rem; height: 3px; background: var(--green);
}

.area { padding-block: 1.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 5rem; }
.area h3 { font-size: var(--step-1); color: var(--heading); }
.area__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: .35rem 0 .75rem; font-size: .9rem; }
.area__meta .tag { margin-left: 0; }
.area__meta a { font-weight: 600; text-decoration: none; }
.area__meta a:hover { text-decoration: underline; }
.area__years { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.area__text { max-width: 46rem; }
.area__text + .area__text { margin-top: .75rem; }
.area__text .cite { white-space: nowrap; }
.area__collab { max-width: 46rem; margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.area--focus {
  background: var(--green-soft);
  box-shadow: -1rem 0 0 var(--green-soft), 1rem 0 0 var(--green-soft);
  border-left: 0;
}

/* Research lines: a title, then their areas */
.research-line { scroll-margin-top: 5rem; }
.research-line + .research-line, .research-page > section + section { margin-top: 3.5rem; }
.research-line__earlier { margin: 2rem 0 .75rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.research-line--past + .research-line--past { margin-top: 2.25rem; }
.research-line--past > h3 { margin: 0 0 .35rem; font-size: var(--step-1); }

/* Past areas: native disclosure, no script */
.area--past { padding-block: 0; }
.area--past summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding-block: .85rem; cursor: pointer; list-style: none; font-weight: 600;
}
.area--past summary::-webkit-details-marker { display: none; }
.area--past summary::before {
  content: "+"; display: inline-block; width: 1rem; color: var(--accent); font-weight: 700;
}
.area--past[open] summary::before { content: "−"; }
.area--past summary:hover .area__summary-title { color: var(--link); }
.area--past summary .area__years { font-size: .9rem; }
.area--past summary .area__count { font-size: .85rem; color: var(--link); text-decoration: none; }
.area--past summary .area__count:hover { text-decoration: underline; }
.area--past summary .area__years + .area__count::before { content: "·"; margin-right: .5rem; }
.area--past[open] { padding-bottom: 1.25rem; }
.area--past > :not(summary) { margin-left: 1rem; }

/* Bibliometrics page ---------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: .5rem 0 0; }
.kpis > div { padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--green); }
.kpis dt { font-size: .82rem; font-weight: 600; color: var(--muted); }
.kpis dd { margin: .1rem 0 0; font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--heading); letter-spacing: -.02em; }
.kpis dd.kpis__note { font-size: .75rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.biblio-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.block__lead { max-width: 46rem; color: var(--muted); margin-bottom: 1rem; }

.legend { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .88rem; }
.legend li { display: flex; align-items: center; gap: .45rem; }
.swatch { width: .8rem; height: .8rem; flex: none; }
.swatch--conf { background: var(--series-conf); }
.swatch--journal { background: var(--series-journal); }
.swatch--other { background: var(--series-other); }

.chart-scroll, .table-scroll { overflow-x: auto; }
.chart { display: block; min-width: 40rem; width: 100%; height: auto; }
.chart__grid { stroke: var(--grid); stroke-width: 1; }
.chart__tick { fill: var(--muted); font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
.chart__seg--conf { fill: var(--series-conf); }
.chart__seg--journal { fill: var(--series-journal); }
.chart__seg--other { fill: var(--series-other); }
.chart__hit { fill: transparent; }
.chart__col:hover .chart__hit { fill: var(--grid); fill-opacity: .6; }

.data-table { margin-top: 1rem; }
.data-table > summary { cursor: pointer; font-weight: 600; color: var(--link); width: fit-content; }
.data-table > summary:hover { text-decoration: underline; }
.data-table table, table.indices { border-collapse: collapse; margin-top: .75rem; font-size: .9rem; min-width: 100%; }
.data-table th, .data-table td, .indices th, .indices td { padding: .4rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.data-table thead th, .indices thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); }
.data-table tfoot th, .data-table tfoot td { font-weight: 700; border-bottom: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.indices tbody th { font-weight: 600; }
.ids { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.ids strong { color: var(--text); }

.node-key { width: .7rem; height: .7rem; flex: none; border-radius: 50%; border: 2px solid var(--node); display: inline-block; }
.node-key--dept { background: var(--node); }

.coauthor-list { columns: 15rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.coauthor-list li { display: flex; align-items: center; gap: .4rem; break-inside: avoid; padding-block: .1rem; }

/* Network */
.network { margin: 0; background: var(--surface); border: 1px solid var(--line); position: relative; }
.network svg { display: block; width: 100%; height: auto; }
.network__links line { stroke: var(--muted); stroke-opacity: .28; }
.network__dot { fill: var(--surface); stroke: var(--node); stroke-width: 2; }
.is-dept .network__dot { fill: var(--node); stroke: var(--surface); }
.network__hit { fill: transparent; cursor: pointer; }
.network__labels text {
  font: 500 11px var(--sans); fill: var(--text); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.network__labels text.is-minor { display: none; }
.network.has-focus .network__node:not(.is-on) { opacity: .15; }
.network.has-focus .network__links line:not(.is-on) { stroke-opacity: .06; }
.network.has-focus .network__links line.is-on { stroke: var(--accent); stroke-opacity: .9; }
.network.has-focus .network__labels text:not(.is-on) { opacity: .15; }
.network__labels text.is-minor.is-on { display: inline; }
.network__status { position: absolute; left: .75rem; bottom: .5rem; margin: 0; font-size: .85rem; font-weight: 600; color: var(--heading); }

.quote { margin: 3rem 0 0; padding-left: 1rem; border-left: 3px solid var(--green); color: var(--muted); }
.quote p { font-size: var(--step-1); font-style: italic; color: var(--text); }
.quote footer { margin-top: .25rem; font-size: .9rem; }

/* Curriculum vitae ------------------------------------------------------ */

.cv-versions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cv-versions a { padding: .4rem 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; }
.cv-versions a:hover { background: var(--green-soft); }
.cv-versions a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-versions a[aria-current] { background: #fff; color: var(--navy); }
}

.cv-page { display: grid; gap: 1.75rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.cv-text { max-width: 46rem; font-size: 1.05rem; line-height: 1.7; }
.cv-text p + p { margin-top: 1.1rem; }


/* CV documents (compact, full): sections of dated entries */
.cv-doc > * { max-width: 56rem; }
.cv-doc .pub { padding-block: .6rem; }
.cv-doc .pub__title { font-size: 1rem; }
/* badges on the same line as the venue, to save space */
.cv-doc .pub__venue { display: inline; }
.cv-doc .pub__links { display: inline-flex; margin: 0 0 0 .5rem; vertical-align: .1em; }
.cv-section + .cv-section { margin-top: 2.75rem; }
.cv-section > h2 {
  position: relative; padding-bottom: .5rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line); font-size: var(--step-1);
}
.cv-section > h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 3rem; height: 3px; background: var(--green);
}
.cv-section h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--heading); }
.cv-prose { max-width: 46rem; }
.cv-area + .cv-area { margin-top: 1.25rem; }
.cv-section h4 { font-size: .95rem; margin: 1.25rem 0 .4rem; color: var(--text); }
.cv-area h4 { margin-top: 0; }
.cv-area h4 a { color: var(--heading); text-decoration: none; }
.cv-area h4 a:hover { color: var(--link); text-decoration: underline; }
.cv-prose + .pubs { margin-top: .5rem; }

.cv-list { margin: 0; display: grid; gap: .45rem; }
.cv-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1.25rem; }
.cv-item dt { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-item dd { margin: 0; }
.cv-list--wide .cv-item { grid-template-columns: 7.5rem minmax(0, 1fr); }
@media (max-width: 36rem) { .cv-item { grid-template-columns: 1fr; gap: 0; } }

.cv-contact { display: grid; gap: .75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.cv-contact .chips { grid-column: 1 / -1; }
.cv-bullets { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.cv-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }

/* Teaching page ---------------------------------------------------------- */

.teaching-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.teaching-page > section + section { margin-top: 3rem; }
.teaching-page .section-title { margin-bottom: 1.25rem; }

.course-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.course-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem 1.4rem; background: var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--navy);
}
.course-card h3 { font-size: var(--step-1); }
.course-card h3 a { color: var(--heading); text-decoration: none; }
.course-card h3 a:hover { color: var(--link); text-decoration: underline; }
.course-card__text { font-size: .95rem; }
.course-card__actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.course-card__actions .btn { margin-right: .5rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .course-card { border-top-color: var(--accent); }
}

.course-meta { color: var(--muted); font-size: .9rem; }
.course-meta abbr[title] { text-decoration: none; }

.course-list { list-style: none; margin: 0; padding: 0; }
.course-row { display: grid; gap: .1rem .75rem; padding-block: .5rem; border-top: 1px solid var(--line); }
.course-row:first-child { border-top: 0; padding-top: 0; }
.course-row__name { font-weight: 600; }
.course-row__editions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.course-row__editions .year-chip { font-size: .75rem; padding-block: 0; }
.archive-note { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
@media (min-width: 52rem) {
  .course-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: baseline; }
  .course-row__editions { grid-column: 1 / -1; }
}

.year-chip {
  display: inline-block; padding: .05rem .5rem; border: 1px solid var(--line); background: var(--surface);
  font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none;
}
a.year-chip:hover { border-color: var(--green); background: var(--green-soft); }
.year-chip--plain { color: var(--muted); }

/* Theses page ------------------------------------------------------------ */

.theses-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.theses-page > section + section { margin-top: 3rem; }
.theses-page .section-title { margin-bottom: 1.25rem; }

.topic-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.topic-card {
  display: grid; gap: .3rem; align-content: start; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green);
}
.topic-card > a, .topic-card__title { font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.35; }
.topic-card > a:hover { color: var(--link); text-decoration: underline; }
.topic-card .meta { font-size: .85rem; }

.thesis-list { list-style: none; margin: 0; padding: 0; }
.thesis { padding-block: .55rem; border-top: 1px solid var(--line); font-size: .95rem; max-width: 52rem; }
.thesis:first-child { border-top: 0; }
.tag--role { background: var(--navy-soft); color: var(--navy); margin-left: .25rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag--role { color: var(--heading); }
}
.thesis-year { scroll-margin-top: 5rem; }
.thesis-year + .thesis-year { margin-top: 1.75rem; }
.thesis-year h3 { font-size: 1.05rem; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }

/* Course and edition pages ----------------------------------------------- */

.course-page { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.course-section + .course-section { margin-top: 2.5rem; }
.course-section h2 { font-size: var(--step-1); margin-bottom: .75rem; }
.course-section > :not(:first-child) + h2, .course-section > p + h2, .course-section > div + h2 { margin-top: 2rem; }
.course-section h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.course-intro { font-size: 1.05rem; }
.page-head__year { color: var(--muted); font-weight: 500; margin-left: .35em; }
.edition-nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.year-chip--current { background: var(--navy); border-color: var(--navy); color: #fff; }
.year-chip--latest { border-color: var(--green); font-weight: 700; }
.notice { padding: .9rem 1.1rem; margin-bottom: 2rem; background: var(--green-soft); border-left: 4px solid var(--green); }
/* old editions: neutral, so it doesn't read as an announcement */
.notice--archive { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted); color: var(--muted); font-size: .92rem; }
.notice--archive a { font-weight: 600; white-space: nowrap; }
.toc { margin-bottom: 2rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .92rem; font-weight: 500; }
.cv-prose ul { padding-left: 1.2rem; }
.cv-prose p + p { margin-top: .75rem; }
table.data { border-collapse: collapse; min-width: 100%; font-size: .93rem; margin-top: .5rem; }
table.data th, table.data td { padding: .45rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); }
.calendar__id, .calendar__when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Popularization page ---------------------------------------------------- */

.pop-lead { max-width: 52rem; font-size: 1.05rem; }
.pop-index { margin-top: 1.5rem; max-width: 52rem; }   /* as wide as the intro: three tiles per row */
.pop-page { padding-block: clamp(2rem, 5vw, 3rem) clamp(3.5rem, 8vw, 5rem); }
.pop-section { scroll-margin-top: 5rem; }
.pop-section + .pop-section { margin-top: 3rem; }
.pop-section .section-title { margin-bottom: 1rem; }
.pop-section .cv-prose { margin-bottom: 1rem; }
.pop-list { max-width: 52rem; margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.pop-list li::marker { color: var(--accent); }

/* BibTeX page ------------------------------------------------------------ */

.bibtex { margin-top: 2rem; }
.bibtex__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.bibtex__actions .btn { border: 0; font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; }
.bibtex__code {
  margin: 0; padding: 1rem 1.25rem; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green);
  font-family: var(--mono); font-size: .88rem; line-height: 1.55;
}

/* Footer ---------------------------------------------------------------- */

.site-footer { background: var(--navy); color: #dbe5f0; font-size: .92rem; border-top: 4px solid var(--green); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration-color: var(--green); }
.site-footer__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem; padding-block: 2.5rem; align-items: start;
}
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__label { font-weight: 600; color: #fff; margin-bottom: .25rem; }
/* The two logos are sized so that their seals have the same diameter:
   the seal is 88.3% of the department image (1060/1200 px) and 119/356 of
   the university one, so the latter is 2.643 times as wide as the former. */
.site-footer__logo { --di: 4.1rem; justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.unimi-logo img { display: block; width: calc(var(--di) * 2.643); height: auto; }

/* department logo, on a white tile: the file has a white background */
.di-logo { display: block; width: calc(var(--di) + .4rem); padding: .2rem; background: #fff; line-height: 0; }
.di-logo img { display: block; width: 100%; height: auto; }

/* Institutional strip above the menu bar. It stays white in dark mode too:
   the department logo has a white background. */
.inst-strip { background: #fff; border-bottom: 1px solid #dde3ec; }
.inst-strip__inner { --di: 4.5rem; display: flex; align-items: center; gap: 1.25rem; padding-block: .4rem; }
.inst-strip img { display: block; width: var(--di); height: auto; }
/* the university logo file is white: paint it navy through a mask */
.inst-strip__unimi {
  /* same seal diameter as the department logo, see the footer */
  box-sizing: content-box; width: calc(var(--di) * 2.643); height: calc(var(--di) * 2.643 * 122 / 356);
  padding-left: 1.25rem; border-left: 1px solid #dde3ec;
  background: #003366 content-box;
  -webkit-mask: url(/img/ATENEO-34.png) right center / contain no-repeat content-box;
  mask: url(/img/ATENEO-34.png) right center / contain no-repeat content-box;
}
.inst-strip__unimi span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-footer__nav p + p { margin-top: .35rem; }
.site-footer__legal { padding-block: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .8rem; color: #b8c7d8; }
@media (max-width: 40rem) { .site-footer__logo { justify-self: start; } }

/* Motion & print -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --heading: #000; --muted: #333; --link: #000; }
  body { font-size: 10.5pt; line-height: 1.4; }
  .site-header, .inst-strip, .skip-link, .chips, .cv, .more, .pub__links, .site-footer__logo,
  .filters, .year-nav, .breadcrumb, .page-head .btn, .areas--nav, .network, .cv-versions { display: none; }
  .cv-page { display: block; }
  .data-table > :not(summary) { display: block; }
  .area--past > :not(summary) { display: block; }
  .page-head { background: none; border: 0; padding: 0 0 1rem; }
  .hero { background: none; }
  .home-grid { display: block; }
  .site-footer { background: none; color: #000; border: 0; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 8pt; color: #555; }
  .pub, .news li { break-inside: avoid; }
}

/* Exam results */
.results-find { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1.5rem 0 .5rem; }
.results-find input { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--text); width: 12rem; }
.results-find input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
table.results td:first-child { font-variant-numeric: tabular-nums; }
table.results tr.is-hidden { display: none; }
.oral-sessions { padding-left: 1.25rem; }

/* Signature ---------------------------------------------------------------
   One motif, used sparingly: the green block cursor after the name in the
   header returns, still, as the marker of section headings, hanging in the
   left margin where there is room. Title bands are flat, without the
   gradient glow common to template sites. Screen only. */

@media screen {
  ::selection { background: var(--green); color: #fff; }

  .brand::after {
    content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: .2em;
    vertical-align: -.15em; background: var(--green); animation: caret 1.1s steps(1) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }

  .hero, .page-head { background: var(--surface); }

  .section-title, .block > h2, .cv-section > h2, .year-group > h2 {
    border-bottom: 0; padding-bottom: 0; padding-left: 1.05rem;
  }
  .section-title::after, .block > h2::after, .cv-section > h2::after, .year-group > h2::after {
    left: 0; top: .2em; bottom: auto; width: .38em; height: .8em; background: var(--green);
  }
  @media (min-width: 80rem) {
    .section-title, .block > h2, .cv-section > h2, .year-group > h2 { padding-left: 0; }
    .section-title::after, .block > h2::after, .cv-section > h2::after, .year-group > h2::after { left: -1.05rem; }
  }
  .home-aside .block > h2 { padding-left: 0; }
  .home-aside .block > h2::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand::after { animation: none; }
}