/* ════════════════════════════════════════════════════════
   Giuseppe D'Arenzo — academic site · shared stylesheet
   ════════════════════════════════════════════════════════ */

:root {
  --bg: oklch(0.985 0.006 80);
  --bg-2: oklch(0.965 0.008 80);
  --ink: oklch(0.20 0.01 80);
  --ink-2: oklch(0.42 0.01 80);
  --ink-3: oklch(0.60 0.01 80);
  --rule: oklch(0.88 0.008 80);
  --rule-2: oklch(0.92 0.006 80);
  --accent: oklch(0.45 0.12 25);
  --accent-soft: oklch(0.94 0.03 25);

  --serif: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  --measure: 44rem;
  --gutter: clamp(1.25rem, 3.5vw, 2.5rem);
  --rhythm: 1.6;
  --section-gap: 4.5rem;
}
html[data-accent="navy"]    { --accent: oklch(0.38 0.10 255); --accent-soft: oklch(0.94 0.03 255); }
html[data-accent="forest"]  { --accent: oklch(0.40 0.09 145); --accent-soft: oklch(0.94 0.03 145); }
html[data-accent="ink"]     { --accent: oklch(0.22 0.01 80);  --accent-soft: oklch(0.92 0.006 80); }
html[data-accent="burgundy"]{ --accent: oklch(0.45 0.12 25);  --accent-soft: oklch(0.94 0.03 25);  }

html[data-theme="ink"] {
  --bg: oklch(0.17 0.01 80); --bg-2: oklch(0.22 0.01 80);
  --ink: oklch(0.95 0.008 80); --ink-2: oklch(0.75 0.01 80); --ink-3: oklch(0.55 0.01 80);
  --rule: oklch(0.30 0.01 80); --rule-2: oklch(0.26 0.01 80);
}

html[data-density="compact"]   { --rhythm: 1.45; --section-gap: 3rem; }
html[data-density="editorial"] { --rhythm: 1.8;  --section-gap: 6rem; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: var(--rhythm); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color 120ms ease, border-color 120ms ease; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.site { max-width: var(--measure); margin: 0 auto; padding: 3.5rem var(--gutter) 6rem; }

/* ── Header / topbar ──────────────────────────────────── */
.topbar { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 3.5rem; gap: 1rem; flex-wrap: wrap; }
.topbar .brand { border: none; color: var(--ink-3); font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; display: flex; gap: 0.6rem; align-items: center; }
.topbar .brand:hover { color: var(--accent); }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar nav a { border: none; color: var(--ink-3); position: relative; }
.topbar nav a:hover { color: var(--accent); }
.topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 2px; background: var(--accent); }

.lang-toggle { display: inline-flex; border: 1px solid var(--rule); margin-left: 0.5rem; }
.lang-toggle button { font-family: inherit; font-size: 0.7rem; letter-spacing: 0.08em; background: none; border: none; padding: 0.3rem 0.55rem; cursor: pointer; color: var(--ink-3); }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ── Masthead (home only) ─────────────────────────────── */
.mast { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; margin-bottom: 3.5rem; }
.mast h1 { font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 0.75rem; white-space: nowrap; }
.mast h1 em { font-style: normal; font-weight: 400; color: var(--accent); }
.mast .role { font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
.mast .role strong { color: var(--ink); font-weight: 500; }
.portrait { width: 150px; height: 150px; border: 1px solid var(--rule); border-radius: 50%; background-image: url('../portrait.jpg'); background-size: cover; background-position: center top; filter: grayscale(0.08) contrast(1.02); }

/* ── Page header (inner pages) ────────────────────────── */
.page-head { margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .kicker { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 0.6rem; }
.page-head .num { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; padding-top: 0.4rem; }
.page-head .lede { font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); max-width: 42rem; margin: 0; text-wrap: pretty; }

.intro { font-size: 1.18rem; line-height: 1.55; color: var(--ink); font-weight: 400; margin: 0 0 2rem; text-wrap: pretty; }
.intro .drop { float: left; font-size: 3.4rem; line-height: 0.9; font-weight: 500; padding: 0.3rem 0.6rem 0 0; color: var(--accent); }

section { margin-top: var(--section-gap); scroll-margin-top: 2rem; }
section:first-of-type { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.section-head h2 { font-weight: 500; font-size: 1.55rem; letter-spacing: -0.01em; margin: 0; }
.section-head .num { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }

h3 { font-weight: 500; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 2rem 0 0.9rem; }
p { margin: 0 0 1.1rem; text-wrap: pretty; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.intro { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.timeline .what .sub, .timeline .what .note, .service .sub, .students .topic { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ── Home quick-links ─────────────────────────────────── */
.quicklinks { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.quicklinks li { border-bottom: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); }
.quicklinks li:nth-child(2n) { border-right: none; }
.quicklinks a { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem; align-items: baseline; padding: 1.1rem 1rem; border: none; }
.quicklinks a:hover { background: var(--bg-2); }
.quicklinks .no { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--accent); padding-top: 0.15rem; }
.quicklinks .lbl { font-size: 1rem; color: var(--ink); font-weight: 500; }
.quicklinks .sub { font-size: 0.85rem; color: var(--ink-2); display: block; margin-top: 0.15rem; font-weight: 400; }
.quicklinks .arrow { color: var(--ink-3); font-size: 0.9rem; align-self: center; }
.quicklinks a:hover .arrow { color: var(--accent); transform: translateX(3px); transition: transform 150ms ease; }
@media (max-width: 600px) { .quicklinks { grid-template-columns: 1fr; } .quicklinks li { border-right: none; } }

/* ── Topics grid ──────────────────────────────────────── */
.topics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1.5rem; border-top: 1px solid var(--rule-2); }
.topics li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.topics .no { font-size: 0.68rem; color: var(--accent); letter-spacing: 0.08em; }
.topics .lbl { font-size: 0.95rem; color: var(--ink); }
@media (max-width: 600px) { .topics { grid-template-columns: 1fr; } }

/* ── Timeline list (projects, collaborations, teaching) ─ */
.timeline { margin: 0; padding: 0; list-style: none; }

/* ── Partners list (industrial collaborations) ─────────── */
.partners { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.partners li { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.partners li:last-child { border-bottom: none; }
.partners a { display: flex; flex-direction: column; gap: 0.15rem; border: none; }
.partners .pt { color: var(--ink); font-weight: 500; font-size: 1rem; letter-spacing: -0.005em; }
.partners .pc { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.partners a:hover .pt { color: var(--accent); }
.partners .pd { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; text-align: justify; hyphens: auto; }
@media (max-width: 640px) {
  .partners li { grid-template-columns: 1fr; gap: 0.5rem; }
}
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.timeline li:last-child { border-bottom: none; }
.timeline .when { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-3); padding-top: 0.15rem; }
.timeline .what .title { font-weight: 500; font-size: 1rem; color: var(--ink); }
.timeline .what .title em { color: var(--accent); font-style: normal; }
.timeline .what .sub { font-style: italic; font-size: 0.95rem; color: var(--ink-2); margin-top: 0.15rem; display: block; }
.timeline .what .note { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.4rem; line-height: 1.5; max-width: 48ch; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ── Metrics row ──────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--bg-2); margin: 1.5rem 0; }
.metrics > div { padding: 1.1rem 1rem; border-right: 1px solid var(--rule); }
.metrics > div:last-child { border-right: none; }
.metrics .n { font-size: 2rem; font-weight: 400; line-height: 1; color: var(--ink); display: block; margin-bottom: 0.35rem; }
.metrics .k { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; }
.metrics .src { font-size: 0.7rem; color: var(--ink-2); margin-top: 0.1rem; display: block; }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr 1fr; } .metrics > div:nth-child(2) { border-right: none; } .metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }

/* ── Publications ─────────────────────────────────────── */
.pubfilter { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pubfilter button { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 1px solid var(--rule); color: var(--ink-2); padding: 0.45rem 0.75rem; cursor: pointer; font-family: inherit; }
.pubfilter button:hover { color: var(--ink); border-color: var(--ink-3); }
.pubfilter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pubs { list-style: none; margin: 0; padding: 0; counter-reset: pub; }
.pubs li { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.9rem 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.pubs li::before { counter-increment: pub; content: counter(pub, decimal-leading-zero); font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.05em; padding-top: 0.15rem; }
.pubs li[hidden] { display: none; }
.pubs .title { font-size: 1.03rem; line-height: 1.4; color: var(--ink); display: block; margin-bottom: 0.3rem; }
.pubs .authors { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.pubs .authors b { color: var(--ink); font-weight: 500; }
.pubs .venue { font-style: italic; font-size: 0.88rem; color: var(--ink-2); display: block; margin-top: 0.2rem; }
.pubs .year { font-size: 0.75rem; color: var(--ink-3); padding-top: 0.15rem; white-space: nowrap; }
.pubs .doi { font-size: 0.7rem; color: var(--ink-3); margin-top: 0.35rem; display: inline-block; border-bottom: 1px solid var(--rule); }
.pubs .doi:hover { color: var(--accent); border-color: var(--accent); }
.pubs .tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 0.6rem; }
@media (max-width: 640px) { .pubs li { grid-template-columns: 1.8rem 1fr; } .pubs .year { grid-column: 2; } }

/* ── Students ─────────────────────────────────────────── */
.students { list-style: none; margin: 0; padding: 0; }
.students li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule-2); display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: baseline; }
.students .nm { font-weight: 500; color: var(--ink); }
.students .role { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 0.6rem; }
.students .topic { font-style: italic; color: var(--ink-2); font-size: 0.95rem; display: block; margin-top: 0.2rem; max-width: 52ch; }
.students .when { font-size: 0.72rem; color: var(--ink-3); }
.students .inst { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.15rem; display: block; }

/* ── Theses ───────────────────────────────────────────── */
.theses { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.theses li { padding: 1.25rem 1.25rem 1.35rem; border-bottom: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; min-height: 12rem; }
.theses li:nth-child(2n) { border-right: none; }
.theses .tnum { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.4rem; }
.theses .tt { font-weight: 500; font-size: 1rem; color: var(--ink); line-height: 1.35; margin-bottom: 0.5rem; }
.theses .td { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 0.9rem; flex: 1; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.theses .meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; font-size: 0.78rem; border-top: 1px solid var(--rule-2); padding-top: 0.55rem; margin-top: auto; }
.theses .meta dt { color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.65rem; padding-top: 0.1rem; }
.theses .meta dd { margin: 0; color: var(--ink-2); }
.theses .meta dd em { color: var(--accent); font-style: normal; }
.thesis-cta { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); background: var(--bg-2); font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }
.thesis-cta a { color: var(--accent); border-bottom-color: var(--accent-soft); font-weight: 500; }
@media (max-width: 640px) { .theses { grid-template-columns: 1fr; } .theses li { border-right: none; } }

/* ── Service list ─────────────────────────────────────── */
.service { list-style: none; margin: 0; padding: 0; }
.service li { padding: 1rem 0; border-bottom: 1px solid var(--rule-2); }
.service .h { font-weight: 500; color: var(--ink); }
.service .sub { font-style: italic; color: var(--ink-2); font-size: 0.95rem; display: block; margin-top: 0.2rem; max-width: 54ch; }
.service .period { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.05em; }

/* ── Contact grid ─────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2rem; border-top: 1px solid var(--rule-2); }
.contact-grid dt { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 0.85rem 0 0.2rem; border-bottom: 1px solid var(--rule-2); }
.contact-grid dd { margin: 0; padding: 0.85rem 0 0.6rem; border-bottom: 1px solid var(--rule-2); color: var(--ink); font-size: 0.95rem; }
.contact-grid dd a { border-bottom: none; color: var(--accent); }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; gap: 0 1rem; } .contact-grid dt { padding-bottom: 0.2rem; border-bottom: none; } }

footer { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); flex-wrap: wrap; gap: 1rem; }
footer .crumbs { display: flex; gap: 1rem; flex-wrap: wrap; }
footer .crumbs a { border: none; color: var(--ink-3); }
footer .crumbs a:hover { color: var(--accent); }

/* ── Tweaks panel ─────────────────────────────────────── */
.tweaks-panel { position: fixed; bottom: 1.25rem; right: 1.25rem; width: 280px; background: var(--bg); border: 1px solid var(--rule); padding: 1rem 1.1rem 1.1rem; font-size: 0.85rem; box-shadow: 0 20px 40px -20px oklch(0 0 0 / 0.15); z-index: 9999; display: none; }
.tweaks-panel.on { display: block; }
.tweaks-panel h4 { margin: 0 0 0.8rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; }
.tweak-row { margin-bottom: 0.85rem; }
.tweak-row .label { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 0.35rem; }
.chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.chip { font-size: 0.75rem; background: none; border: 1px solid var(--rule); color: var(--ink-2); padding: 0.3rem 0.55rem; cursor: pointer; font-family: inherit; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; padding: 0; border: 2px solid transparent; cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.15); }

@media print { .topbar nav, .tweaks-panel { display: none !important; } body { font-size: 10pt; } .site { max-width: none; padding: 0; } a { color: inherit; border: none; } section { page-break-inside: avoid; } }