/*
 * Evangelos Kalogerakis — academic homepage
 * -----------------------------------------
 * A lightweight, responsive stylesheet. All content is in index.html.
 * No framework, external fonts, JavaScript, or build step required.
 *
 * Edit the design palette here; add new publication <article> elements
 * in index.html by copying an existing one.
 */

:root {
  color-scheme: light;
  --ink: #202934;
  --ink-strong: #121b27;
  --muted: #5a6878;
  --accent: #245c91;
  --accent-dark: #17466f;
  --accent-light: #eaf3fa;
  --paper: #ffffff;
  --surface: #f7f9fb;
  --surface-warm: #f9fafb;
  --line: #e1e7ec;
  --student: #955338;
  --max-width: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.2rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.67 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a {
  color: var(--accent);
  text-decoration-color: rgba(36, 92, 145, .40);
  text-underline-offset: .15em;
}
a:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible {
  outline: 3px solid #72b3dd;
  outline-offset: 4px;
  border-radius: 3px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink-strong); line-height: 1.22; }
section[id] { scroll-margin-top: 5.9rem; }
.shell { width: min(var(--max-width), calc(100% - 72px)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -80px; left: 18px; z-index: 100;
  padding: 11px 16px; color: white; background: var(--accent);
}
.skip-link:focus { top: 12px; }

/* Navigation: scrolls horizontally on small screens (no hamburger JS). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); }
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; min-height: 77px;
}
.site-name {
  white-space: nowrap; color: var(--ink-strong); text-decoration: none;
  letter-spacing: -.025em; font-size: 1.04rem; font-weight: 480;
}
.site-name strong { font-weight: 760; }
.site-name:hover { color: var(--accent); }
.site-nav {
  display: flex; align-items: center; gap: clamp(12px, 1.5vw, 23px);
  overflow-x: auto; scrollbar-width: thin; white-space: nowrap;
}
.site-nav a {
  padding: 25px 0 24px; text-decoration: none; color: var(--muted);
  font-size: .80rem; font-weight: 610; transition: color .14s ease;
}
.site-nav a:hover { color: var(--accent); }

/* Hero: quiet, typographic, intentionally academic. */
.hero { background: #f7f9fb; border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 266px;
  align-items: center; gap: clamp(40px, 9vw, 110px);
  padding-block: 70px 74px;
}
.eyebrow, .section-kicker {
  color: var(--accent); font-size: .74rem; letter-spacing: .15em;
  font-weight: 760; text-transform: uppercase;
}
.eyebrow { margin-bottom: 21px; }
.hero h1 {
  margin: 0 0 15px;
  font-size: clamp(3rem, 5.4vw, 4.65rem);
  font-weight: 720; line-height: 1.065; letter-spacing: -.057em;
}
.academic-role { margin-bottom: 8px; font-size: 1.20rem; font-weight: 670; color: #293849; }
.affiliations { margin-bottom: 20px; color: var(--muted); line-height: 1.6; }
.affiliations strong { font-weight: 500; }
.hero-description {
  max-width: 600px; margin: 0 0 17px;
  color: #364a5c; font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  line-height: 1.52;
}
.contact { font-size: .92rem; color: var(--muted); }
.contact strong { color: #2f4051; }
.hero-links { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.hero-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid #d4dfe8; border-radius: 6px;
  background: white; color: var(--accent); font-weight: 650; font-size: .87rem;
  text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
.hero-links a:hover { background: var(--accent-light); border-color: #a6c5de; }
.hero-portrait { align-self: start; padding-top: 10px; }
.hero-portrait img {
  width: 100%; max-width: 266px; height: auto;
  border-radius: 8px; border: 7px solid white;
  background: #e8edf3; box-shadow: 0 9px 35px rgba(26, 49, 73, .11);
}

/* Section headings and highlighted projects. */
.section { padding-block: 69px 78px; }
.section-heading {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px; margin-bottom: 27px;
}
.section-kicker { margin-bottom: 10px; }
.section-heading h2, .about-layout h2 {
  margin-bottom: 0; font-weight: 720;
  font-size: clamp(1.72rem, 3vw, 2.18rem); letter-spacing: -.035em;
}
.section-summary { max-width: 445px; margin: 0 0 2px; color: var(--muted); font-size: .96rem; }
.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.featured-card {
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); transition: box-shadow .18s ease, transform .18s ease;
}
.featured-card:hover { transform: translateY(-2px); box-shadow: 0 11px 30px rgba(28, 53, 80, .07); }
.featured-image {
  display: flex; align-items: center; justify-content: center;
  height: 234px; overflow: hidden; background: #f2f5f8;
  border-bottom: 1px solid var(--line); padding: 15px;
}
.featured-image img { width: 100%; height: 100%; object-fit: contain; }
.featured-copy { padding: 22px 23px 23px; flex: 1; }
.featured-venue { color: #637586; font-size: .76rem; font-weight: 760; letter-spacing: .075em; }
.featured-copy h3 {
  margin: 8px 0 13px; font-size: clamp(1.05rem, 1.5vw, 1.20rem);
  letter-spacing: -.015em; line-height: 1.44; font-weight: 690;
}
.featured-copy h3 a { color: var(--ink-strong); text-decoration: none; }
.featured-copy h3 a:hover { color: var(--accent); }
.featured-more { font-size: .84rem; font-weight: 660; text-decoration: none; }
.featured-more span { font-size: 1.05em; }

/* Biography. */
.about-section { background: var(--surface); border-block: 1px solid var(--line); }
.about-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 56px; }
.about-layout h2 { max-width: 235px; }
.about-copy { color: #445467; font-size: 1.00rem; line-height: 1.90; }
.about-copy p { margin: 0; }
.about-copy em { font-style: italic; }

/* Full publication list. All 69 original abstracts are retained. */
.publications-section { padding-bottom: 81px; }
.section-heading-papers { margin-bottom: 14px; }
.publication-note { max-width: 430px; margin: 0; color: var(--muted); font-size: .87rem; }
.student-color { color: var(--student); }
.importantnote { color: #b03e43; font-weight: 620; }
.reading-tip { margin: 8px 0 24px; color: #77818c; font-size: .83rem; }
.paper-list { border-top: 1px solid var(--line); }
.paper {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  align-items: start; gap: 29px; padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.paper-thumb {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #f3f5f8; border: 1px solid #e6eaf0;
  border-radius: 6px; padding: 10px; min-height: 137px;
  text-decoration: none;
}
.paper-thumb img { width: 100%; max-height: 150px; object-fit: contain; }
.paper-thumb:hover { border-color: #adc4d7; }
.paper-main { min-width: 0; }
.paper-title {
  margin: -1px 0 7px; font-size: 1.085rem;
  line-height: 1.40; font-weight: 710; letter-spacing: -.013em;
}
.paper-meta {
  color: #566676; font-size: .89rem; line-height: 1.72;
  overflow-wrap: anywhere;
}
.paper-meta p { margin: 0; }
.paper-meta a { color: var(--accent); font-weight: 620; }
.paper-meta i { font-style: normal; }
.paper-meta em { font-style: normal; }
.paper-meta img { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 25px; vertical-align: middle; }
.paper-abstract { margin-top: 13px; }
.paper-abstract summary {
  display: list-item; width: fit-content; padding: 3px 2px;
  cursor: pointer; color: var(--accent); font-weight: 665; font-size: .84rem;
}
.paper-abstract summary:hover { color: var(--accent-dark); text-decoration: underline; }
.paper-abstract[open] summary { margin-bottom: 9px; }
.abstract-body {
  padding: 17px 18px; max-width: 85ch; border-left: 3px solid #cbdce9;
  background: var(--surface); color: #465667;
  font-size: .91rem; line-height: 1.79;
}
.abstract-body em, .abstract-body i { font-style: normal; }
.abstract-body em:first-child { font-weight: 700; color: #344658; }
.abstract-body p { margin-bottom: .5em; }
.abstract-body p:last-child { margin-bottom: 0; }

/* Talks, people, teaching, and academic service. */
.secondary-section { border-top: 1px solid var(--line); }
.section-tint { background: var(--surface-warm); }
.text-panel, .service-card {
  padding: 25px 29px; background: white;
  border: 1px solid var(--line); border-radius: 8px;
}
.talks-copy { max-width: 100%; line-height: 2.0; color: #4f5d6b; }
.talks-copy p { margin: 0; }
.talks-copy a { font-weight: 620; }
.people-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 22px; }
.people-panel h3, .course-panel h3 {
  margin-bottom: 18px; font-size: 1.02rem; font-weight: 710; line-height: 1.50;
}
.people-entries { color: #526172; font-size: .92rem; line-height: 1.94; }
.people-entries a { font-weight: 625; }
.course-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; align-items: start; }
.course-list { list-style: none; padding: 0; margin: 0; }
.course-list li {
  padding: 10px 0; border-top: 1px solid #eef1f4;
  color: #556575; font-size: .92rem; line-height: 1.6;
}
.course-list li:first-child { padding-top: 0; border-top: 0; }
.course-list li:last-child { padding-bottom: 0; }
.course-list a { font-weight: 570; text-decoration-thickness: 1px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.service-card { color: #536273; font-size: .94rem; line-height: 1.85; }
.service-card p { margin: 0; }
.service-card strong, .service-card b { color: var(--ink-strong); }
.service-card:last-child { grid-column: 1 / -1; }

.site-footer { border-top: 1px solid var(--line); background: white; }
.footer-inner {
  padding-block: 26px 34px; display: flex;
  justify-content: space-between; gap: 20px; align-items: center;
  color: #7b8895; font-size: .79rem;
}
.footer-inner a { text-decoration: none; font-weight: 620; white-space: nowrap; }

@media (max-width: 1050px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 15px; }
  .site-nav { width: 100%; }
  .site-nav a { padding: 11px 0 15px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 30px; }
  .hero-portrait img { max-width: 230px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 7.7rem; }
  .shell { width: calc(100% - 40px); }
  .hero-grid { padding-block: 46px 51px; grid-template-columns: minmax(0, 1fr) 174px; gap: 25px; }
  .hero h1 { font-size: clamp(2.55rem, 7.1vw, 3.6rem); }
  .hero-portrait img { max-width: 174px; border-width: 5px; }
  .eyebrow { font-size: .66rem; }
  .section { padding-block: 49px 58px; }
  .section-heading { flex-direction: column; align-items: start; gap: 12px; }
  .section-summary { max-width: 100%; }
  .featured-image { height: 192px; }
  .about-layout { grid-template-columns: 1fr; gap: 20px; }
  .about-layout h2 { max-width: none; }
  .paper { grid-template-columns: 150px minmax(0,1fr); gap: 18px; }
  .paper-thumb { min-height: 106px; }
  .paper-thumb img { max-height: 128px; }
  .people-grid, .course-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .header-inner { padding-top: 12px; }
  .site-name { font-size: .96rem; }
  /* Every section link stays visible; the menu wraps without JavaScript. */
  .site-nav { flex-wrap: wrap; overflow: visible; gap: 3px 17px; white-space: normal; padding: 7px 0 12px; }
  .site-nav a { font-size: .77rem; padding: 0; white-space: nowrap; }
  section[id] { scroll-margin-top: 10rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 104px; align-items: start; gap: 14px; padding-block: 35px 42px; }
  .hero h1 { font-size: clamp(2.25rem, 8.5vw, 3.1rem); }
  .academic-role { font-size: 1.04rem; }
  .hero-description { font-size: 1.04rem; }
  .hero-portrait { padding-top: 36px; }
  .hero-portrait img { max-width: 104px; border-width: 3px; border-radius: 4px; }
  .hero-links { gap: 8px; }
  .hero-links a { font-size: .80rem; padding: 7px 10px; }
  .featured-grid { grid-template-columns: 1fr; gap: 17px; }
  .featured-image { height: 215px; }
  .featured-copy { padding: 17px 19px 20px; }
  .paper { grid-template-columns: 105px minmax(0,1fr); gap: 13px; padding: 23px 0; }
  .paper-thumb { min-height: 90px; padding: 4px; }
  .paper-thumb img { max-height: 115px; }
  .paper-title { font-size: 1.00rem; }
  .paper-meta { font-size: .83rem; }
  .text-panel, .service-card { padding: 21px 20px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card:last-child { grid-column: auto; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .shell { width: calc(100% - 30px); }
  .hero-grid { grid-template-columns: minmax(0,1fr) 86px; gap: 10px; }
  .hero h1 { font-size: 2.20rem; }
  .hero-portrait img { max-width: 86px; }
  .paper { grid-template-columns: 84px minmax(0, 1fr); gap: 11px; }
  .paper-title { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Attribution under a historical animation (retained from the original site). */
.paper-art { min-width: 0; }
.paper-credit { margin-top: 5px; text-align: center; color: #7b8793; font-size: .66rem; line-height: 1.4; }