/* ============================================================
   INNER PAGES — geometry-faithful styles measured from the XD
   artboards (1600 design px; container x145→1455 = 1310).
   pct(x) = (x-145)/1310. Key columns:
   x241=7.3% · x337=14.7% · x433=22% · x495=26.7% · x591=34.1%
   x625=36.6% · x687=41.4% · x817=51.3% · x879=56% · x913=58.6%
   x977=63.5% · x1057=69.6% · x1129=75.1% · x1167=78%
   ============================================================ */

/* ---------- shared ---------- */
.page-top { padding: 120px 0 0; }
.page-title {
  font-size: 60px; font-weight: 300; line-height: 1.25;
  color: var(--blue-700);
  margin-left: 7.3%;
}
.page-lede { margin: 45px 0 0 22%; max-width: 720px; font-size: 22px; }

.centered-head { text-align: center; padding-top: 160px; }
.centered-head h2 { font-size: 60px; font-weight: 300; color: var(--blue-700); }
.centered-head p { max-width: 980px; margin: 10px auto 0; font-size: 22px; }

/* ---------- data table (Projects · Archiv · Publications) ---------- */
.data-table { margin-top: 110px; }
.data-table .dt-head {
  display: grid;
  grid-template-columns: 26.7% 51.3% 22%;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  color: var(--blue-300); text-transform: uppercase;
  padding-bottom: 40px;
}
.dt-row {
  display: grid;
  grid-template-columns: 26.7% 51.3% 22%;
  align-items: start;
  padding-bottom: 86px;
}
.dt-row .dt-img { width: 254px; max-width: 92%; }
.dt-row .dt-img img { width: 100%; height: auto; }
.dt-row h3 { font-size: 33px; font-weight: 400; line-height: 1.2; max-width: 560px; }
.dt-row .dt-desc { font-size: 18px; margin-top: 26px; max-width: 560px; }
.dt-row .dt-authors { font-size: 22px; margin-top: 26px; }
.dt-row .dt-source { font-size: 18px; }
.dt-row .dt-source .src-note { margin-top: 26px; }
.dt-row .dt-source .doi { display: inline-block; margin-top: 12px; }
.dt-row .recommend {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; margin-top: 34px; color: var(--blue-700);
}

/* ---------- RESEARCH OLD ---------- */
.highlights { margin-top: 200px; color: var(--blue-900); }
.highlights h2 {
  font-size: 60px; font-weight: 300; color: var(--blue-900);
  margin: 0 0 70px .2%;
}
.hl-grid-a {
  display: grid; grid-template-columns: 48.5% 44%; gap: 7.5%;
  align-items: start;
}
.hl-grid-a img { width: 100%; height: auto; }
.hl-grid-bc {
  display: grid; grid-template-columns: 48.5% 44%; gap: 7.5%;
  margin-top: 130px;
}
.highlights h3 { font-size: 33px; font-weight: 600; margin-bottom: 22px; }
.highlights p { font-size: 22px; color: var(--blue-900); }
.highlights .archiv-row { margin: 100px 0 0 56%; }

/* ---------- ARCHIV / PROJECTS section heads ---------- */
.projects-head { text-align: center; padding-top: 190px; }
.projects-head h2 { font-size: 60px; font-weight: 300; color: var(--blue-700); }

/* ---------- MEMBERS ---------- */
.members-intro { position: relative; margin-top: 40px; min-height: 560px; }
.members-intro .intro-photo {
  width: 56%; margin-left: 0;
}
.members-intro .intro-photo img { width: 100%; height: auto; }
.members-intro .intro-text {
  position: absolute; left: 63.5%; top: 150px; width: 36.5%;
}
.members-intro .intro-text h2 {
  font-size: 60px; font-weight: 300; line-height: 1.15; margin-bottom: 55px;
}
.members-intro .intro-text p { font-size: 22px; }
.members-intro .join-banner { margin: 66px 0 0 26.7%; }

.leader-block {
  display: grid; grid-template-columns: 34.7% 58%; gap: 6.6%;
  margin-top: 130px;
}
.leader-block .portrait img { width: 100%; height: auto; }
.leader-block h3 { font-size: 33px; font-weight: 600; }
.leader-block .role { font-size: 22px; margin-top: 20px; }
.leader-block .bio { font-size: 22px; margin-top: 28px; max-width: 620px; }
.leader-block .links { display: flex; gap: 60px; margin-top: 60px; }

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 22%);
  column-gap: 4%;
  row-gap: 90px;
  margin-top: 120px;
}
.member-card .photo { aspect-ratio: 1/1; background: var(--blue-200); overflow: hidden; }
.member-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card .plate {
  background: var(--blue-300); color: var(--blue-700);
  padding: 10px 12px 12px; min-height: 74px;
}
.member-card .plate .name { font-size: 20px; font-weight: 500; display: block; }
.member-card .plate .role { font-size: 18px; display: block; }

.alumni-head { padding-top: 170px; }
.alumni-head h2 { font-size: 60px; font-weight: 300; margin-left: 14.7%; }
.alumni-head p { margin: 12px 0 0 14.7%; max-width: 980px; font-size: 22px; }

/* ---------- PUBLICATIONS ---------- */
.pub-intro {
  display: grid; grid-template-columns: 53% 25%; gap: 22%;
  margin-top: 45px; margin-left: 22%;
}
.pub-intro { grid-template-columns: 58% 27%; gap: 15%; }
.pub-intro .lede { font-size: 22px; }
.pub-aside h4 { font-size: 22px; font-weight: 600; margin-bottom: 15px; }
.pub-aside img { width: 273px; max-width: 100%; height: auto; }
.pub-aside .cap { font-size: 14px; margin-top: 25px; }
.pub-aside .zoom { display: inline-block; font-size: 18px; margin-top: 30px; text-decoration: underline; }

/* ---------- OUR LAB ---------- */
.lab-hero { position: relative; margin-top: 55px; min-height: 0; }
.lab-hero .img-left {
  position: absolute; left: 0; top: 134px; width: 44%; max-width: 576px;
}
.lab-hero .img-right {
  position: absolute; left: 48.7%; top: 0; width: 51.3%; max-width: 672px;
}
.lab-hero img { width: 100%; height: auto; }
.lab-cols {
  display: grid; grid-template-columns: 44% 48.7%; gap: 7.3%;
  margin-top: 1142px; align-items: start;   /* XD: left col starts 1142px below hero top */
}
.lab-cols .col-right { margin-top: -569px; }   /* XD: right text starts at 573px, under right image */
.lab-cols .col-right p { font-size: 22px; }
.lab-cols .col-right .join-banner { margin-top: 100px; }
.lab-cols .col-left h3 { font-size: 33px; font-weight: 600; margin-bottom: 60px; }
.lab-cols .col-left p { font-size: 22px; }

.fzj-band { position: relative; margin-top: 150px; }
.fzj-band img { width: 100%; height: auto; display: block; }
.fzj-band .band-text {
  position: absolute; left: 51.9%; top: -145px; width: 40%;   /* XD: heading 145px above band image */
  color: var(--blue-300);
}
.fzj-band .band-text h3 { font-size: 33px; font-weight: 600; color: var(--blue-300); }
.fzj-band .band-text p { font-size: 22px; margin-top: 30px; }
.fzj-band .band-text a { display: inline-block; font-size: 18px; margin-top: 40px; text-decoration: underline; }

.partner-head { text-align: center; padding-top: 190px; }
.partner-head h2 { font-size: 60px; font-weight: 300; }
.partner-head p { max-width: 940px; margin: 8px auto 0; font-size: 22px; }

.partner-table { margin-top: 140px; }
.partner-table .pt-head {
  display: grid; grid-template-columns: 34.1% 24.5% 41.4%;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  color: var(--blue-300); text-transform: uppercase;
  padding-bottom: 48px;
}
.partner-table .pt-row {
  display: grid; grid-template-columns: 34.1% 24.5% 41.4%;
  font-size: 18px; padding-bottom: 100px; align-items: start;
}
.partner-table .pt-row .info { max-width: 500px; }

/* ---------- CONTACT ---------- */
.contact-top { position: relative; margin-top: 0; }
.contact-panel {
  margin-left: 35.7%; width: 68.9%; max-width: 902px;
  padding: 13px 0 60px 1%;
}
.contact-panel h2 { font-size: 33px; font-weight: 600; }
.contact-panel .sub { font-size: 33px; font-weight: 400; margin-top: 8px; max-width: 830px; }

.contact-form { margin-top: 90px; max-width: 830px; }
.contact-form .field { margin-bottom: 44px; }
.contact-form label {
  display: block; font-size: 18px; color: var(--blue-300); margin-bottom: 4px;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
  width: 100%; max-width: 620px;
  border: 0; border-bottom: 1px solid var(--blue-300);
  background: transparent; font: inherit; font-size: 33px; color: var(--blue-700);
  padding: 2px 0 8px;
}
.contact-form textarea {
  width: 100%; max-width: 829px; min-height: 358px;
  border: 1px solid var(--blue-700); background: transparent;
  font: inherit; font-size: 22px; color: var(--blue-700);
  padding: 16px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 1px solid var(--blue-500); }

.contact-form .consent {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; margin-top: 30px;
}
.contact-form .consent input {
  appearance: none; width: 23px; height: 23px;
  border: 1px solid var(--blue-700); background: transparent; cursor: pointer;
}
.contact-form .consent input:checked { background: var(--blue-700); }
.contact-form .send-row { margin-top: 24px; text-align: right; }

.stay-in-touch { position: absolute; left: .6%; top: 645px; width: 30%; }
.stay-in-touch h3 { font-size: 33px; font-weight: 600; margin-bottom: 24px; }
.stay-in-touch .social a { display: block; font-size: 33px; padding: 5px 0; }
.stay-in-touch .adr-label { font-size: 18px; color: var(--blue-300); margin-top: 55px; }
.stay-in-touch address { font-style: normal; font-size: 33px; line-height: 1.4; margin-top: 12px; }

.map-band { position: relative; margin-top: 90px; }
.map-band img { width: 100%; height: auto; display: block; }
.map-band .radius {
  position: absolute; left: 32%; top: 36%; width: 13%; aspect-ratio: 1/1;
  background: rgba(154, 177, 196, .45); border: 1px solid var(--blue-700);
  border-radius: 50%;
}
.map-band .city { position: absolute; font-size: 26px; font-weight: 500; color: var(--blue-900); }

/* ---------- RESPONSE ---------- */
.response-main { padding-bottom: 160px; }
.response-main .msg { margin: 45px 0 0 22%; font-size: 33px; }
.response-main .back-row { margin: 100px 0 0 21.5%; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .page-title, .page-lede { margin-left: 0; }
  .page-lede { margin-top: 30px; }
  .members-intro { min-height: 0; }
  .members-intro .intro-photo { width: 100%; }
  .members-intro .intro-text { position: static; width: auto; margin-top: 40px; }
  .members-intro .join-banner { margin-left: 0; }
  .leader-block { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .alumni-head h2, .alumni-head p { margin-left: 0; }
  .pub-intro { grid-template-columns: 1fr; gap: 48px; margin-left: 0; }
  .dt-head { display: none; }
  .dt-row, .data-table .dt-head { grid-template-columns: 1fr; }
  .dt-row { gap: 24px; padding-bottom: 64px; }
  .hl-grid-a, .hl-grid-bc { grid-template-columns: 1fr; gap: 40px; }
  .highlights .archiv-row { margin-left: 0; }
  .lab-hero { min-height: 0; }
  .lab-hero .img-left, .lab-hero .img-right { position: static; width: 100%; margin-top: 24px; }
  .lab-cols { grid-template-columns: 1fr; margin-top: 48px; }
  .lab-cols .col-right { margin-top: 0; }
  .fzj-band .band-text { position: static; width: auto; margin-bottom: 24px; color: var(--blue-700); }
  .fzj-band .band-text h3 { color: var(--blue-700); }
  .partner-table .pt-head { display: none; }
  .partner-table .pt-row { grid-template-columns: 1fr; gap: 12px; padding-bottom: 48px; }
  .contact-panel { margin-left: 0; width: auto; padding-left: 0; }
  .stay-in-touch { position: static; width: auto; margin-top: 70px; }
  .response-main .msg, .response-main .back-row { margin-left: 0; }
}
@media (max-width: 720px) {
  .page-title { font-size: 38px; }
  .centered-head h2, .projects-head h2, .partner-head h2,
  .alumni-head h2, .highlights h2 { font-size: 36px; }
  .member-grid { grid-template-columns: 1fr; }
  .dt-row h3, .contact-panel h2, .contact-panel .sub,
  .stay-in-touch .social a, .stay-in-touch address,
  .response-main .msg { font-size: 24px; }
  .contact-form input[type="text"], .contact-form input[type="email"] { font-size: 24px; }
  .map-band .city { font-size: 16px; }
}

/* ---------- IMPRINT / PRIVACY ---------- */
.legal-text { max-width: 830px; margin-left: 22%; padding: 30px 24px 160px; }
.legal-text h2 { font-size: 33px; font-weight: 600; color: var(--blue-700); margin: 70px 0 24px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { font-size: 22px; }
.legal-text a { text-decoration: underline; }
@media (max-width: 1100px) { .legal-text { margin-left: 0; } }

/* ---------- PUBLICATIONS (real list) ---------- */
.pub-row { padding-bottom: 70px; }
.pub-row .dt-year { font-size: 33px; font-weight: 300; color: var(--blue-500); }
.pub-row h3 { font-size: 26px; }
.pub-row .dt-authors { font-size: 18px; margin-top: 14px; max-width: 620px; color: var(--blue-500); }
.pub-row .dt-authors strong { color: var(--blue-700); font-weight: 600; }
.pub-row .dt-source p { margin-bottom: 10px; }
.pub-row .dt-source em { font-style: normal; font-weight: 600; }
.pub-row .doi { font-size: 16px; word-break: break-all; text-decoration: underline; }
.pub-aside .profile-links { list-style: none; margin-top: 8px; }
.pub-aside .profile-links li { padding: 8px 0; border-bottom: 1px solid var(--blue-300); }
.pub-aside .profile-links a { font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.pub-aside .profile-links .icon-corner { width: 12px; height: 12px; stroke: var(--blue-700); fill: none; stroke-width: 1.4; }

.dt-empty { font-size: 22px; color: var(--blue-500); padding: 20px 0 120px; }

.contact-form .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }