/* Personal page of V. A. Kharchenko — shared stylesheet */
:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --ink: #1f2328;
  --muted: #5b6470;
  --line: #e4e0d8;
  --accent: #1d5c4f;
  --accent-soft: #e6efec;
  --link: #1d5c4f;
  --radius: 10px;
  --maxw: 980px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181b;
    --surface: #1d2125;
    --ink: #e6e3dd;
    --muted: #a3a9b1;
    --line: #2f3439;
    --accent: #6fbfa9;
    --accent-soft: #20302c;
    --link: #8fd3c0;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin: 0 0 .4rem; }
h2 {
  font-size: 1.45rem; margin: 2.6rem 0 1rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Header / navigation */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none; padding: .35rem .7rem; border-radius: 999px; font-size: .95rem;
}
.nav a:hover { color: var(--ink); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 230px; gap: 2.2rem; align-items: start; padding: 2.6rem 0 1rem; }
.hero .portrait { width: 230px; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.12); background: var(--line); aspect-ratio: 600 / 862; object-fit: cover; }
.roles { list-style: none; padding: 0; margin: .4rem 0 1.2rem; color: var(--muted); }
.roles li { margin: .1rem 0; }
.roles strong { color: var(--ink); font-weight: 600; }
.contact { font-size: .95rem; color: var(--muted); margin: 0 0 1.2rem; }
.contact a { white-space: nowrap; }
.profiles { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.profiles a {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem;
}
.profiles a:hover { border-color: var(--accent); color: var(--accent); }
.epigraph { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 1.6rem 0 0; font-size: 1rem; }
.epigraph span { font-style: normal; font-size: .9rem; }

/* Generic blocks */
.lead { font-size: 1.05rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.card h3 { margin-top: 0; }
.card p { margin: .4rem 0; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; }
.tags li { background: var(--accent-soft); color: var(--ink); padding: .3rem .7rem; border-radius: 6px; font-size: .95rem; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .95rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }

details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem 1.1rem; margin: .8rem 0; }
details[open] { padding-bottom: .8rem; }
summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
summary::marker { color: var(--accent); }

/* Publications */
.pubs { list-style: none; padding-left: 0; margin-left: 0; }
.pubs li { margin: 0 0 .8rem; padding-left: 1.4rem; text-indent: -1.4rem; }
.pubs .lang { color: var(--muted); font-size: .9rem; }
.pubs a.file, .pubs a.doi {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  padding: .05rem .45rem; margin-left: .25rem; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--accent); color: var(--accent); vertical-align: 1px;
}
.pubs a.file, .pubs a.doi { text-indent: 0; }
.pubs a.file:hover, .pubs a.doi:hover { background: var(--accent); color: var(--bg); }
.pubs .hl { background: #ffe58a; color: #1f2328; border-radius: 2px; }
.toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1rem 0 .4rem; }
.toolbar input[type="search"] {
  flex: 1 1 260px; font: inherit; padding: .55rem .8rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.toc { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; margin: .4rem 0 0; }
.toc a { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--accent-soft); text-decoration: none; font-size: .9rem; }
.count { color: var(--muted); font-weight: 400; font-size: .95rem; font-family: var(--sans); }
.hidden { display: none !important; }
.note { color: var(--muted); font-size: .92rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.gallery a { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery a:hover { border-color: var(--accent); }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }
.gallery span { display: block; padding: .55rem .8rem; font-size: .95rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; border-radius: 8px; background: var(--line); }
.photos figcaption { font-size: .92rem; color: var(--muted); margin-top: .3rem; }

.site-footer { margin-top: 3.5rem; border-top: 1px solid var(--line); padding: 1.4rem 0 2.4rem; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1.6rem; }
  .hero .portrait { width: 150px; order: -1; }
  .two-col { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
  .site-header { position: static; }
}
@media print {
  .site-header, .toolbar, .site-footer { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  details { border: 0; padding: 0; }
  a { color: #000; }
}

/* Photo gallery pages */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.thumbs a { display: block; border-radius: 6px; overflow: hidden; background: var(--line); color: var(--ink); text-decoration: none; }
.thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs a:hover img, .thumbs a:focus img { opacity: .85; }
.thumbs span { display: block; padding: .3rem .5rem .4rem; font-size: .82rem; line-height: 1.3; background: var(--surface); }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(10, 12, 14, .94); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; max-width: 92vw; text-align: center; }
.lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; display: block; margin: 0 auto; }
.lb figcaption { color: #e6e3dd; font-size: .95rem; margin-top: .6rem; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; padding: .4rem .8rem; opacity: .8; }
.lb button:hover { opacity: 1; }
.lb-close { top: .4rem; right: .6rem; }
.lb-prev { left: .3rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .3rem; top: 50%; transform: translateY(-50%); }