@charset "utf-8";
/* =====================================================================
   Voglmeir Liu Group — 2026 homepage
   Centred typographic layout, hairline rules and a lot of air.

   The palette is a faint pink rather than the earlier warm cream: the
   page white, the tint, the greys and the red accent have all been
   moved a few degrees towards rose. The accent is a deep rose that
   still reads as a seal red against the paper.

   The group logo sits at the top as a small crest, exactly the size the
   original design used. style/top.png is GGBRC_logo.png (1002x824), which
   is shown 72px wide and is therefore never upscaled.

   No web fonts and no external requests.
   ===================================================================== */

:root {
  --paper:   #fdf9fa;   /* page white, a barely-there pink */
  --paper-2: #f8f1f3;   /* tinted plate for pictures */
  --ink:     #1a1517;
  --ink-2:   #453d41;
  --stone:   #6d6369;
  --hair:    #eee4e8;
  --hair-2:  #ded2d8;
  --accent:  #a83a55;   /* deep rose */

  --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;

  --measure: 44rem;
  --wide:    68rem;
  --pad:     1.35rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1.02rem, .98rem + .22vw, 1.1rem)/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0 0 .6em;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { font-size: .68em; }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-wide {
  width: 100%;
  max-width: calc(var(--wide) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- masthead ---------- */
.masthead {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.crest { display: inline-block; }
.crest img { width: 72px; height: auto; margin-inline: auto; }

.wordmark {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  letter-spacing: .02em;
  margin: .7rem 0 .1rem;
}
.wordmark a { color: var(--ink); text-decoration: none; }

.tagline {
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 .3rem;
}
.affil {
  font-size: .84rem;
  color: var(--stone);
  margin: 0 0 1.8rem;
}

/* nav */
.nav {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding-block: .75rem;
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem 1.1rem;
}
.nav a {
  font-size: .88rem;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: .02em;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom: 1px solid currentColor; }

.nav-toggle { display: none; }

/* ---------- opening ---------- */
.opening { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.opening h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  margin-bottom: .7em;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  line-height: 1.68;
  color: var(--ink-2);
  margin-bottom: 1.6rem;
}
.opening-links { font-size: .92rem; color: var(--stone); }
.opening-links a { text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.opening-links a:hover { border-bottom-color: var(--accent); }
.opening-links span { margin: 0 .6rem; color: var(--hair-2); }

/* ---------- plate ---------- */
.plate { margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); }
.plate img {
  width: 100%;
  border: 1px solid var(--hair);
  background: var(--paper-2);
}
.plate figcaption {
  font-size: .82rem;
  color: var(--stone);
  text-align: center;
  margin-top: .8rem;
  font-style: italic;
}

/* ---------- carousel ---------- */
.carousel {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.slide-list {
  position: relative;
  aspect-ratio: 16 / 6.5;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.slide-list > li {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  /* A hidden slide must not be able to answer a click: without this the
     invisible slides swallow the clicks meant for the arrows below them. */
  pointer-events: none;
}
.slide-list > li.is-active { opacity: 1; pointer-events: auto; }
.slide-list img {
  /* Absolutely positioned, so that "fit inside the box" is definite: a
     percentage max-height on a centred grid item is not applied by every
     browser, and the picture then spills out of the slide. */
  position: absolute;
  inset: .7rem;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 1.4rem);
  max-height: calc(100% - 1.4rem);
  object-fit: contain;
}

.slide-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: .9rem;
}
.slide-bar button {
  background: none;
  border: 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1;
  padding: .35rem .5rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.slide-bar button:hover { color: var(--accent); border-bottom-color: currentColor; }
.slide-count {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
  text-align: center;
}

/* ---------- sections ---------- */
.section {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
.section:last-of-type { border-bottom: 0; }
.section h2 {
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--stone);
  margin-bottom: 1.7rem;
  text-align: center;
}

/* focus as a description list */
.focus { margin: 0; }
.focus dt {
  font-family: var(--serif);
  font-size: 1.18rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.1rem;
}
.focus dd {
  margin: .3rem 0 1.4rem;
  color: var(--stone);
  font-size: .96rem;
}
.focus dd:last-child { margin-bottom: 0; }

/* publications */
.pubs { display: grid; gap: 1.8rem; }
.pubs li { border-top: 1px solid var(--hair); padding-top: 1.2rem; }
.pub-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.pub-detail { font-size: .88rem; color: var(--stone); margin-bottom: .25rem; }
.pub-detail em { font-style: italic; }
.more { text-align: center; margin-top: 1.6rem; font-size: .92rem; }
.more a { text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.more a:hover { border-bottom-color: var(--accent); }
.footnote { font-size: .78rem; color: var(--stone); text-align: center; margin-top: 1rem; }

/* news */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.news h3 {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .6rem;
  margin-bottom: .9rem;
}
.news-body { font-size: .93rem; color: var(--ink-2); }
.news-body ul { display: grid; gap: .7rem; }
.news-body a { text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.news-empty { color: var(--stone); font-style: italic; margin: 0; }

/* visit */
.visit { text-align: center; }
.address {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--hair);
  margin-top: clamp(1rem, 4vw, 2rem);
  padding-block: 2.2rem 2.6rem;
  text-align: center;
  font-size: .84rem;
  color: var(--stone);
}
.foot-mark {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .4rem;
}
.foot-links { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.foot-links a { color: var(--stone); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .nav-toggle {
    display: block;
    margin: 0 auto .5rem;
    background: none;
    border: 1px solid var(--hair-2);
    border-radius: 3px;
    padding: .5rem .7rem;
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; margin: 3px 0; background: var(--ink); }
  .nav { display: none; }
  body.nav-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
  .nav li:last-child a { border-bottom: 0; }

  .news { grid-template-columns: 1fr; gap: 1.8rem; }
  .slide-list { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .masthead { padding-top: 2rem; }
  .affil { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .masthead nav, .carousel, .site-foot { display: none; }
  body { background: #fff; }
  .section { break-inside: avoid; }
}

/* =====================================================================
   Interior pages

   The pages other than the homepage share the same masthead, the same
   hairline sections and the same footer. Only the content in between is
   different, so everything below is written once and used by all of them.
   ===================================================================== */

/* ---------- the page heading ---------- */
.page-head { padding-block: clamp(2.4rem, 5vw, 3.8rem) clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.page-head h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  font-weight: 400;
}
.page-head .lede { margin-inline: auto; }
.page-head .subtitle {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--stone);
  margin: 0;
}

/* ---------- plain body copy ---------- */
.prose { font-family: var(--serif); font-size: 1.04rem; line-height: 1.75; color: var(--ink-2); max-width: var(--measure); }
.prose p { margin: 0 0 1.05em; }
.prose a { color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.2em; list-style: revert; }
.prose li { margin-bottom: .35em; }
.centre { margin-inline: auto; }

/* ---------- a CV / history list: "Since 2015" -> what happened ---------- */
.timeline { margin: 0; max-width: var(--measure); }
.timeline > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.4rem; padding: .85rem 0; border-top: 1px solid var(--hair); }
.timeline > div:first-child { border-top: 0; }
.timeline dt { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); padding-top: .18rem; }
.timeline dd { margin: 0; font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.timeline dd em { font-style: italic; }

/* a plain list of small items (reviewing activities, journals, services) */
.ticklist { max-width: var(--measure); }
.ticklist li { font-family: var(--serif); font-size: .98rem; line-height: 1.6; color: var(--ink-2); padding: .4rem 0 .4rem 1.1rem; position: relative; border-top: 1px solid var(--hair); }
.ticklist li:first-child { border-top: 0; }
.ticklist li::before { content: "\2013"; position: absolute; left: 0; color: var(--hair-2); }

/* ---------- people: a photograph, a name, a note ---------- */
.people { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.people > li { text-align: center; }
.people img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  margin-bottom: .7rem;
}
.people .p-name { font-family: var(--serif); font-size: .98rem; color: var(--ink); margin: 0 0 .2rem; line-height: 1.35; }
.people .p-note { font-size: .78rem; color: var(--stone); margin: 0; line-height: 1.45; }

/* the head of a member page: portrait on the left, details on the right */
.member { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.member .portrait { margin: 0; }
.member .portrait img { width: 100%; height: auto; border: 1px solid var(--hair); background: var(--paper-2); }
.member .portrait figcaption { font-size: .78rem; color: var(--stone); margin-top: .5rem; }
.member h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 400; margin: 0 0 .3rem; line-height: 1.15; }
.member .role { font-family: var(--serif); font-size: 1.05rem; color: var(--accent); margin: 0 0 1rem; }
.member .where { font-size: .93rem; color: var(--stone); line-height: 1.7; margin: 0 0 1rem; }
.member .where a { color: var(--accent); }

/* small badge links (ORCID, ResearchGate, Mendeley, ...) */
.badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.badges a { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; text-decoration: none;
            color: var(--stone); border: 1px solid var(--hair-2); padding: .3rem .6rem; }
.badges a:hover { color: var(--accent); border-color: var(--accent); }
.badges img { width: 16px; height: 16px; }

/* ---------- photographs ---------- */
.photos { display: grid; gap: clamp(2rem, 5vw, 3.4rem); }
.photos figure { margin: 0; }
.photos img { width: 100%; height: auto; border: 1px solid var(--hair); background: var(--paper-2); }
.photos figcaption { font-size: .88rem; line-height: 1.75; color: var(--stone); margin-top: .9rem; text-align: center; }
.photos figcaption strong { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: var(--ink); margin-bottom: .3rem; }
.photos figcaption .steps { display: block; }

/* a pair of pictures side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; border: 1px solid var(--hair); background: var(--paper-2); }

/* ---------- contact ---------- */
.contact-card { font-family: var(--serif); font-size: 1.06rem; line-height: 1.9; color: var(--ink-2); text-align: center; }
.contact-card a { color: var(--accent); }
.contact-card .label { display: block; font-family: var(--sans); font-size: .74rem; letter-spacing: .12em;
                       text-transform: uppercase; color: var(--stone); margin-bottom: .5rem; }
.maps { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.4rem; align-items: start; }
.maps figure { margin: 0; }
.maps img { width: 100%; height: auto; border: 1px solid var(--hair); background: var(--paper-2); }

/* ---------- site map ---------- */
.sitemap-list { max-width: var(--measure); margin-inline: auto; }
.sitemap-list li { font-family: var(--serif); font-size: 1.06rem; border-top: 1px solid var(--hair); }
.sitemap-list li:first-child { border-top: 0; }
.sitemap-list a { display: block; padding: .8rem .2rem; text-decoration: none; color: var(--ink-2); }
.sitemap-list a:hover { color: var(--accent); }
.sitemap-list .here { color: var(--accent); }

/* ---------- publications, one block per year ---------- */
.pub-years { display: grid; gap: clamp(2.2rem, 5vw, 3.2rem); }
.pub-year h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  border-bottom: 1px solid var(--hair);
  padding-bottom: .5rem;
  margin: 0 0 1.4rem;
}
.pub-year .pubs li:first-child { border-top: 0; padding-top: 0; }
.pub-files { font-size: .82rem; margin: .35rem 0 0; }
.pub-files a { text-decoration: none; border-bottom: 1px solid var(--hair-2); margin-right: .7rem; }
.pub-files a:hover { border-bottom-color: var(--accent); }

/* the two "everything as one file" downloads at the top of publications */
.downloads { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.4rem; }
.downloads a {
  display: inline-block; font-size: .84rem; text-decoration: none; color: var(--stone);
  border: 1px solid var(--hair-2); padding: .45rem .9rem;
}
.downloads a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .member { grid-template-columns: 1fr; }
  .member .portrait { max-width: 13rem; margin-inline: auto; }
  .maps { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .timeline > div { grid-template-columns: 1fr; gap: .2rem; }
  .timeline dt { padding-top: 0; }
  .people { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1.2rem 1rem; }
}

@media print {
  .photos figure, .people > li { break-inside: avoid; }
}