/* ==========================================================================
   Betegon Lab — GeoCities / Web 1.0 pixel theme (tasteful retro)
   Fonts: "Press Start 2P" (labels/nav/titles), "VT323" (headings/wordmark),
          Verdana (body — period-accurate + readable)
   ========================================================================== */

:root {
  /* Monkey Island: sunny tropical sea + torchlight + parchment */
  --ink:    #2a2138;   /* dark border + body text on parchment */
  --pink:   #ef8a34;   /* torch orange — primary accent */
  --pink-d: #cf6a1e;   /* deep torch — headings */
  --cyan:   #2bb3c9;   /* Caribbean teal */
  --gold:   #f2b148;   /* lantern gold */
  --gold-l: #ffd66e;
  --purple: #7d5cae;   /* twilight purple */
  --wood:   #4a3320;   /* plank brown */
  --paper:  #f3ecd6;   /* aged parchment */
  --page:   #57c6cf;   /* tropical sea */
  --page2:  #e8dcbc;   /* darker parchment panel */
  --muted:  #6b5d47;   /* faded ink */
  --line:   #2a2138;
  --maxw:   1000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  background-color: #57c6cf;
  /* sunny tropical sea + sky */
  background-image:
    radial-gradient(circle at 50% -25%, rgba(255,255,255,.55), transparent 45%),  /* sun/sky glow */
    radial-gradient(circle at 85% 6%, rgba(255,236,170,.35), transparent 26%),     /* warm sun */
    linear-gradient(180deg, #86dbdd 0%, #4dbfca 48%, #2ea7b8 100%);
  background-attachment: fixed;
}

/* pixel sprites should never blur */
img.px, .px img { image-rendering: pixelated; image-rendering: crisp-edges; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ---- reusable pixel window / bevel ---- */
.window,
.panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
}
.window-title {
  font-family: "Press Start 2P", monospace;
  font-size: .62rem;
  color: var(--gold-l);
  text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #5c3f24 0%, #452e19 50%, #3a2614 100%);
  border-bottom: 3px solid var(--ink);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: .5px;
}
.window-title .dots { margin-left: auto; display: flex; gap: 5px; }
.window-title .dots i { width: 10px; height: 10px; background: var(--gold); border: 2px solid var(--ink); display: block; border-radius: 50%; }
/* landing-page window: palm green, stepped (pixel) bands + cream text */
.hero .window-title {
  color: #f4ecd8;
  background: linear-gradient(180deg,
    #57b06f 0 25%,
    #46a05f 25% 50%,
    #37904f 50% 75%,
    #2c7a43 75% 100%);
}

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: "VT323", "Courier New", monospace;
  color: var(--pink-d);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 .35em;
  letter-spacing: .5px;
}
h1 { font-size: 2.9rem; }
h2 { font-size: 2.1rem; margin-top: 1.1em; color: var(--purple); }
h3 { font-size: 1.5rem; color: var(--ink); }

h1::before { content: ""; }

p { margin: 0 0 1.05em; }

a { color: var(--pink-d); text-decoration: underline; }
a:hover { color: var(--gold); background: #fff6c9; }

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

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: transparent; }
.header-inner {
  margin-top: 24px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  position: relative;
}
/* little corner sprites on the banner */
.header-inner::after {
  content: "";
  position: absolute; top: -14px; right: 14px;
  width: 34px; height: 34px;
  background: url("../img/pixel/sparkle.png") center/contain no-repeat;
  image-rendering: pixelated;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand:hover { background: transparent; }
.brand-icon { height: 76px; width: auto; display: block; image-rendering: pixelated; }
.brand-name {
  font-family: "VT323", monospace;
  font-size: 2.5rem; line-height: .9; color: var(--ink);
  letter-spacing: 1px; white-space: nowrap;
}
.brand-name .at { color: var(--pink); }

/* nav = beveled pixel buttons */
.site-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.site-nav a {
  font-family: "Press Start 2P", monospace;
  font-size: .58rem;
  text-decoration: none;
  color: #fff;
  background: var(--purple);
  border: 3px solid var(--ink);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.35), 3px 3px 0 rgba(0,0,0,.45);
  padding: 9px 10px;
  line-height: 1;
  display: inline-block;
}
.site-nav a:hover { background: var(--pink); color: #fff; transform: translate(1px,1px); box-shadow: inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.35), 2px 2px 0 rgba(0,0,0,.45); }
.site-nav a.active { background: var(--pink); box-shadow: inset 2px 2px 0 rgba(0,0,0,.30), inset -2px -2px 0 rgba(255,255,255,.25); transform: translate(1px,1px); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--ink); margin: 4px 0; }

/* ==========================================================================
   Main content — wrapped in a pixel "window"
   ========================================================================== */
main.wrap {
  margin: 34px auto 34px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  padding: 26px 28px 34px;
}

/* section eyebrow labels using pixel font */
.eyebrow {
  font-family: "Press Start 2P", monospace;
  font-size: .55rem; color: var(--cyan); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 10px;
}

/* pixel divider */
hr, .divider {
  border: 0; height: 10px; margin: 26px 0;
  background: url("../img/pixel/divider.png") repeat-x center;
  background-size: auto 10px;
  image-rendering: pixelated;
}

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero { text-align: center; }
.hero .lede {
  font-family: "VT323", monospace;
  font-size: 2.1rem; line-height: 1.1; color: var(--purple);
  max-width: 760px; margin: 6px auto 20px;
}
.hero-sprites { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 6px 0 18px; }
.hero-sprites img { image-rendering: pixelated; }
.hero-sprites .eye { height: 54px; }
.hero-sprites .dna { height: 74px; }
.hero-sprites .capsid { height: 62px; }

.hero-figure { margin: 8px auto 0; max-width: 820px; }
.hero-figure .window-title { justify-content: flex-start; }
.hero-figure img { display: block; width: 100%; border: 0; }
figcaption { color: var(--muted); font-size: .82rem; margin-top: .8em; font-style: italic; }

/* ==========================================================================
   Research
   ========================================================================== */
.research-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center;
  padding: 26px 0;
}
.research-block + .research-block { border-top: 3px dashed var(--purple); }
.research-block img { border: 3px solid var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.4); background: #fff; }
.research-block.reverse .research-figure { order: 2; }

/* ==========================================================================
   People
   ========================================================================== */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 24px; margin: 20px 0 8px; }
.person { text-align: center; }
.person .avatar {
  width: 148px; height: 148px; object-fit: cover;
  margin: 0 auto 12px; display: block;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
  background: var(--page2);
  image-rendering: auto;
}
.person .avatar.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: "VT323", monospace; font-size: 3.4rem; color: var(--purple);
}
.person .avatar[src$="thomas.jpg"] { object-position: center top; }
.person h3 { margin: 0 0 2px; font-size: 1.35rem; color: var(--ink); }
.person .role { font-family: "Press Start 2P", monospace; color: var(--pink-d); font-size: .62rem; line-height: 1.6; margin: 6px 0 8px; }
.person .meta { color: var(--muted); font-size: .82rem; margin: 0; }
.person .meta a { color: var(--muted); }
.section-label { text-align: center; margin-top: 1.8em; }

/* ==========================================================================
   Publications
   ========================================================================== */
.pub-list { list-style: none; padding: 0; margin: 8px 0 0; }
.pub { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; }
.pub + .pub { border-top: 2px dotted var(--purple); }
.pub .num { font-family: "VT323", monospace; font-size: 1.7rem; color: var(--gold); line-height: 1; }
.pub .cite { margin: 0; font-size: .92rem; }
.pub .cite em { color: var(--purple); font-style: italic; }
.pub .cite .title { text-decoration: underline; text-underline-offset: 2px; }
.pub .cite .authors .me { font-weight: bold; color: var(--pink-d); }
.pub .links a {
  font-family: "Press Start 2P", monospace; font-size: .5rem;
  margin: 8px 8px 0 0; text-decoration: none; color: #fff; background: var(--cyan);
  border: 2px solid var(--ink); padding: 5px 7px; display: inline-block;
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.pub .links a:hover { background: var(--gold); transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,.45); }

/* ==========================================================================
   Downloads (3D printing)
   ========================================================================== */
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 18px; }
.dl-card {
  border: 3px solid var(--ink); padding: 20px; background: var(--page2);
  text-decoration: none; color: var(--ink); display: block;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}
.dl-card::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 10px;
  background: url("../img/pixel/star.png") center/contain no-repeat; image-rendering: pixelated; }
.dl-card:hover { background: #fff6c9; transform: translate(1px,1px); box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.dl-card .name { font-family: "VT323", monospace; font-size: 1.4rem; color: var(--pink-d); margin: 0 0 4px; text-align: center; }
.dl-card .file { font-size: .8rem; color: var(--muted); word-break: break-all; text-align: center; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.address { font-style: normal; line-height: 1.9; font-size: 1rem; }
.address strong { font-family: "VT323", monospace; color: var(--pink-d); font-size: 1.7rem; }
.contact-grid img { border: 3px solid var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin: 0 auto 26px; }
.footer-inner {
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  padding: 14px 18px; display: flex; justify-content: center; align-items: center;
  gap: 10px 22px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); text-align: center;
}
.footer-inner .badge {
  font-family: "Press Start 2P", monospace; font-size: .5rem; color: var(--purple);
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-inner .badge::before { content: ""; width: 18px; height: 16px;
  background: url("../img/pixel/heart.png") center/contain no-repeat; image-rendering: pixelated; }
.footer-inner .badge.plain { color: var(--muted); }
.footer-inner .badge.plain::before { content: none; }
.footer-inner a { color: var(--pink-d); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .header-inner { justify-content: space-between; }
  .brand-icon { height: 56px; }
  .brand-name { font-size: 1.8rem; white-space: normal; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; order: 3;
    flex-direction: column; gap: 8px; margin-top: 10px;
  }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { text-align: center; font-size: .6rem; padding: 12px; }
  main { padding: 20px 18px 26px; }
  .research-block, .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .research-block.reverse .research-figure { order: 0; }
  .hero .lede { font-size: 1.7rem; }
}