* { box-sizing: border-box; }
:root { color-scheme: light; background: #fff; color: #555; font: 16px/1.5 Arial, sans-serif; }
body { margin: 0; min-height: 100svh; }
.publication { margin: 0; padding: 10px 10px 20px; text-align: center; }
.publication-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 30px); margin: 0 auto; box-shadow: 0 5px 15px rgb(0 0 0 / 18%); }
.publication--coming-soon .publication-image { max-height: calc(100svh - 74px); }
.publication figcaption { margin-top: 20px; }
/* On small screens keep the menu above, rather than over, the artwork. */
@media (max-width: 760px) {
  .publication { padding-top: 64px; }
  .publication-image { max-height: calc(100svh - 84px); }
  .publication--coming-soon .publication-image { max-height: calc(100svh - 128px); }
}

@font-face {
  font-family: "Latin Modern Sans";
  src: url("/assets/fonts/lmsans10-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Latin Modern Sans";
  src: url("/assets/fonts/lmsans10-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Clear the menu: 10px top + 44px button + 10px gap. */
.subatomic-page { padding-top: 64px; }
.publication-header {
  max-width: 1226px;
  margin: 0 auto 24px;
  padding: 0 20px;
  text-align: center;
  color: #0048A0;
  font-family: "Latin Modern Sans", Arial, sans-serif;
}
.publication-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.12;
}
.publication-header p {
  margin: 14px 0 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.4;
}
.subatomic-page .publication { padding-top: 0; }