/* Daniel Kaufmann — minimal academic layout
   Centered single column, black on white, content first. */

:root {
  --ink:        #1a1a1a;
  --ink-muted:  #5c5c5c;
  --rule:       #e2e2e2;
  --link:       #14507d;
  --link-hover: #0d3b5c;
  --bg:         #ffffff;
  --measure:    52rem;

  /* accent — awards and the draft banner. The only hue besides link blue. */
  --accent:      #7a5c00;
  --accent-bg:   #fff8e1;
  --accent-rule: #f0e0a0;

  /* Type scale. Every font-size on the site comes from one of these five;
     do not introduce ad-hoc rem values. Body prose is the 1rem default and
     needs no token. */
  --fs-xs:   0.86rem;  /* buttons, toggles, asides, banner, footer */
  --fs-sm:   0.94rem;  /* nav, lists, tables, publication entries */
  --fs-h3:   1.05rem;
  --fs-h2:   1.2rem;
  --fs-h1:   1.65rem;

  /* hanging indent that separates publication entries now that the
     rules between them are gone */
  --pub-indent: 1.6rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- shared column ---------------------------------------------------- */
.site-header,
main,
.site-footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --- header ----------------------------------------------------------- */
.site-header {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.site-nav {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 1rem;   /* the body base — a step up from --fs-sm */
}

.site-nav a:hover { color: var(--link); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* --- content ---------------------------------------------------------- */
main { padding-block: 1.75rem 3rem; }

h1, h2, h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-block: 2rem 0.6rem;
}

h1 { font-size: var(--fs-h1); margin-top: 0.5rem; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, ul, ol { margin-block: 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.3rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

/* portrait on the homepage */
.portrait {
  float: right;
  width: 14rem;
  margin: 0.25rem 0 1.25rem 1.75rem;  /* small offset: aligns to cap height, not line box */
  border-radius: 3px;
}

/* affiliation line under the name */
.affiliation {
  color: var(--ink-muted);
  margin-top: -0.2rem;
}

/* news / dated list */
.news { list-style: none; padding-left: 0; }
.news li {
  margin-bottom: 0.85rem;
  font-size: var(--fs-sm);
  padding-left: 8.4rem;
  text-indent: -8.4rem;   /* hanging indent: date sits in its own column */
}
.news .date {
  display: inline-block;
  width: 8.4rem;
  text-indent: 0;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  vertical-align: top;
}

/* dataset entries on the Data page — separated by whitespace, no rules,
   matching the publication entries */
.dataset {
  margin-bottom: 1.6rem;
}
.dataset h3 { margin-top: 0; }
.dataset .meta {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); }

img { max-width: 100%; height: auto; }

/* wide things scroll rather than breaking the page */
.scroll-x { overflow-x: auto; }

/* --- footer ----------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.25rem 3rem;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}
.site-footer a { color: var(--ink-muted); }

/* --- a11y ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 0.6rem;
  background: var(--bg);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rule);
  z-index: 10;
}

/* postal address block — same size and colour as the bio prose above it;
   only the line breaks distinguish it */
.address {
  margin-bottom: 0.6rem;
}

/* --- publications ------------------------------------------------------ */
/* One entry is a single flowing line — authors, title, journal at one size
   in one colour, with the title the only emphasis. Entries are separated by
   whitespace and a hanging indent rather than by rules. */
.pub {
  margin-bottom: 1.6rem;
}

.pub p { margin: 0 0 0.25rem; }

.pub-entry {
  font-size: var(--fs-sm);
  padding-left: var(--pub-indent);
  text-indent: calc(-1 * var(--pub-indent));
}

.pub-title { font-weight: 600; }
.pub-title a { color: var(--ink); text-decoration: none; }
.pub-title a:hover { color: var(--link); text-decoration: underline; }

.pub-doi { color: var(--ink-muted); }

/* everything below the entry line aligns to the hanging indent */
.pub .pub-buttons,
.pub .pub-award,
.pub .pub-news,
.pub > .abstract,
.pub > .pub-note {
  margin-left: var(--pub-indent);
}

/* button row */
.pub-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem !important;
}

.btn {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
.btn:hover {
  border-color: var(--link);
  color: var(--link);
  text-decoration: none;
}

/* expandable abstract */
.abstract { margin-top: 0.4rem; }

.abstract summary {
  display: inline-block;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  list-style: none;
  user-select: none;
}
.abstract summary::-webkit-details-marker { display: none; }

.abstract summary::before {
  content: "+";
  display: inline-block;
  width: 1rem;
  font-variant-numeric: tabular-nums;
}
.abstract[open] summary::before { content: "−"; }

.abstract summary:hover { color: var(--link); }

.abstract summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

.abstract > p {
  margin: 0.5rem 0 0.2rem 1rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* placeholder note */
.note {
  background: #f7f7f5;
  border-left: 3px solid var(--rule);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* award, note, press */
.pub-award {
  font-size: var(--fs-xs);
  color: var(--accent);
}
.pub-note {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-style: italic;
}
.abstract .pub-note { margin: 0.4rem 0 0.2rem 1rem; padding-left: 0.85rem; }
.pub-news {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 0.45rem !important;
}
.pub-news a { color: var(--ink-muted); }
.pub-news a:hover { color: var(--link); }

/* --- draft-phase banner (shown while _config.yml has noindex: true) ------ */
.draft-banner {
  margin: 0;
  padding: 0.7rem 1.25rem;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--accent-rule);
  color: var(--accent);
  font-size: var(--fs-xs);
  text-align: center;
}
.draft-banner a { color: var(--accent); }

.footer-profiles {
  margin-bottom: 0.4rem;
  line-height: 2;
}

/* profile buttons on the homepage */
.profile-buttons {
  clear: none;
  margin-top: 0 !important;
  margin-bottom: 1.5rem;
}

/* in-page section jump links */
.section-nav {
  margin-top: 0.2rem !important;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

/* anchored headings should not sit flush against the viewport top */
h2[id], h3[id] { scroll-margin-top: 1.25rem; }

/* Section markers. The default is a small square; Research and Data replace
   it with an icon. The icon is an inline SVG used as a *mask*, not an image,
   so its colour still comes from --ink-muted and no file is fetched. */
h2::before,
h3[id]::before {
  content: "\25AA";          /* ▪ black small square */
  color: var(--ink-muted);
  margin-right: 0.55rem;
  font-size: 0.72em;
  vertical-align: 0.12em;
}

.page-home h2#research-interests::before,
.page-home h2#research-profiles::before,
.page-home h2#news::before,
.page-home h2#contact::before,
.page-research h2::before,
.page-data h2::before,
.page-data h3[id]::before {
  content: "";
  display: inline-block;
  font-size: 1em;           /* undo the 0.72em above so the em sizing below is true */
  width: 0.88em;
  height: 0.88em;
  vertical-align: -0.09em;
  background-color: var(--ink-muted);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.page-home h2#research-interests { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z%22/%3E %3Cline x1=%227%22 y1=%227%22 x2=%227.01%22 y2=%227%22/%3E %3C/svg%3E"); }
.page-home h2#research-profiles  { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/%3E %3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E %3C/svg%3E"); }
.page-home h2#news    { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22m3 11 18-5v12L3 14v-3z%22/%3E %3Cpath d=%22M11.6 16.8a3 3 0 1 1-5.8-1.6%22/%3E %3C/svg%3E"); }
.page-home h2#contact { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/%3E %3Cpolyline points=%222.5 5.5 12 13 21.5 5.5%22/%3E %3C/svg%3E"); }
.page-research h2  { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E %3Cpolyline points=%2214 2 14 8 20 8%22/%3E %3Cline x1=%228%22 y1=%2213%22 x2=%2215%22 y2=%2213%22/%3E %3Cline x1=%228%22 y1=%2217%22 x2=%2215%22 y2=%2217%22/%3E %3C/svg%3E"); }
.page-data h2,
.page-data h3[id]  { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpolyline points=%223 3 3 21 21 21%22/%3E %3Cpolyline points=%226.5 15.5 10.5 10 14.5 13 20 5.5%22/%3E %3C/svg%3E"); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- data source table -------------------------------------------------- */
h4 {
  font-size: var(--fs-sm);
  margin-block: 1.5rem 0.5rem;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Two columns: the source name (itself the link) and what it covers.
   No rules — the column edge is the structure. */
.datatable { margin-bottom: 1.25rem; }

.datatable th,
.datatable td {
  border-bottom: 0;
  vertical-align: baseline;
  padding: 0.35rem 0 0.35rem 0;
}

.datatable th {
  width: 13rem;   /* the two longest names ("Historical Statistics of
                     Switzerland Online (HSSO)") wrap to two lines, not four */
  padding-right: 1rem;
  font-weight: 400;
}

.datatable td { color: var(--ink-muted); }

.datatable .alt-links { white-space: nowrap; }

/* stacked toggles inside a dataset entry sit closer together */
.dataset .abstract + .abstract { margin-top: 0.25rem; }

/* --- narrow screens ----------------------------------------------------- */
@media (max-width: 34rem) {
  body { font-size: 16px; }
  .site-header { padding-top: 1.75rem; }
  .portrait { float: none; display: block; margin: 0 0 1.25rem 0; width: 11rem; }
  .news li { padding-left: 0; text-indent: 0; }
  .news .date { display: block; width: auto; margin-bottom: 0.1rem; }

  /* the hanging indent costs horizontal space we do not have */
  .pub-entry { padding-left: 0; text-indent: 0; }
  .pub .pub-buttons,
  .pub .pub-award,
  .pub .pub-news,
  .pub > .abstract,
  .pub > .pub-note { margin-left: 0; }

  /* two columns will not fit: stack name above description */
  .datatable,
  .datatable tbody,
  .datatable tr,
  .datatable th,
  .datatable td { display: block; width: auto; }
  .datatable th { padding: 0 0 0.1rem 0; }
  .datatable td { padding: 0 0 0.85rem 0; }
}