@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/NotoSansSC-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --n: #0d1e34;
  --n2: #152a46;
  --g: #c9a35a;
  --c: #f6f2ea;
  --b: #e4ebf1;
  --w: #fff;
  --x: #636b74;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Lato", Arial, sans-serif;
  --max: 1460px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--c);
  color: var(--n2);
  font-family: var(--sans);
  line-height: 1.55;
}
html:lang(zh) body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html:lang(zh) .display,
html:lang(zh) .h2,
html:lang(zh) .h3 {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.01em;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
.container {
  width: min(calc(100% - 8vw), var(--max));
  margin: auto;
}
.section {
  padding: clamp(4rem, 7vw, 7rem) 0;
}
.cream {
  background: var(--c);
}
.blue {
  background: var(--b);
}
.navy {
  background: var(--n);
  color: #fff;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 1.7rem;
}
.eyebrow:before {
  content: "";
  width: 42px;
  height: 2px;
  background: currentColor;
}
.gold {
  color: var(--g);
}
.display,
.h2,
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
}
.display {
  font-size: clamp(3.3rem, 5.4vw, 6.2rem);
  line-height: 0.96;
}
.display em {
  display: block;
  color: var(--g);
  font-weight: 400;
}
.h2 {
  font-size: clamp(2.6rem, 4vw, 4.6rem);
  line-height: 1.05;
}
.h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.lead {
  color: var(--x);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  max-width: 65ch;
}
.navy .lead {
  color: #dce4ed;
}
.skip {
  position: fixed;
  top: -100px;
  left: 1rem;
  background: #fff;
  padding: 0.7rem;
  z-index: 99;
}
.skip:focus {
  top: 1rem;
}
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--n);
  border-bottom: 2px solid var(--g);
}
.head {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  width: 112px;
}
.toggle {
  display: none;
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff77;
  padding: 0.7rem 1rem;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1.1rem, 2.3vw, 2.8rem);
}
.nav {
  min-width: 0;
}
.nav a {
  position: relative;
  display: inline-block;
  padding: 1.1rem 0;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
}
.nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 2px;
  background: var(--g);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.2s;
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] {
  color: var(--g);
}
.nav a:hover:after,
.nav a:focus-visible:after,
.nav a[aria-current="page"]:after {
  transform: scaleX(1);
}
.language-switcher {
  position: relative;
  flex: 0 0 auto;
}
.language-switcher summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 52px;
  padding: 0.4rem 0.45rem;
  border: 0;
  border-bottom: 1px solid #ffffff4a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.language-switcher summary::-webkit-details-marker {
  display: none;
}
.language-switcher summary:before {
  content: "·";
  color: var(--g);
  font-size: 0.9rem;
}
.language-switcher summary:after {
  content: "⌄";
  margin-left: auto;
  color: var(--g);
}
.language-switcher[open] summary,
.language-switcher summary:hover,
.language-switcher summary:focus-visible {
  border-color: var(--g);
}
.language-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 180px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--g);
  box-shadow: 0 18px 45px #0004;
}
.language-menu a {
  display: flex;
  justify-content: space-between;
  padding: 0.58rem 0.65rem;
  color: var(--n);
  text-decoration: none;
  font-size: 0.76rem;
}
.language-menu a:hover,
.language-menu a:focus-visible,
.language-menu a[aria-current="true"] {
  background: var(--b);
  color: var(--n);
}
.language-menu span {
  color: var(--g);
  font-weight: 700;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 64px;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--g);
  background: var(--w);
  color: var(--n);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.btn:hover,
.btn:focus-visible {
  background: var(--n);
  color: #fff;
  transform: translateY(-1px);
}
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 3.5rem;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.home-copy {
  margin-top: -3rem;
}
.frame {
  border: 1px solid var(--g);
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3.5rem;
}
.card {
  background: #fffffff2;
  border: 1px solid #0d1e3428;
  padding: 2.2rem 2rem;
  min-height: 220px;
  min-width: 0;
}
.num {
  color: var(--g);
  font-family: var(--serif);
  font-size: 1.35rem;
}
.card p {
  color: var(--x);
}
.project-list {
  display: grid;
  margin-top: 2.5rem;
  border-top: 1px solid #0d1e3420;
  border-bottom: 1px solid #0d1e3420;
}
.project {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 3rem;
  align-items: center;
  padding: 2.25rem 0;
  border-bottom: 1px solid #0d1e3420;
}
.project:last-child {
  border-bottom: 0;
}
.project .h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
}
.project img {
  width: 190px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--g);
}
.biohero .frame {
  background: var(--b);
  padding: 1rem;
}
.biohero .frame img {
  max-height: 690px;
  margin: auto;
}
.timeline-panel {
  margin-top: 2.7rem;
}
.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.65rem;
}
.timeline-head p {
  margin: 0;
  color: var(--x);
  font-size: 0.82rem;
}
.timeline-nav {
  display: flex;
  gap: 0.5rem;
}
.timeline-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid #0d1e3430;
  border-radius: 50%;
  background: transparent;
  color: var(--n2);
  cursor: pointer;
  transition: 0.2s;
}
.timeline-nav button:hover,
.timeline-nav button:focus-visible {
  border-color: var(--g);
  color: var(--g);
}
.timelinewrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-color: var(--g) transparent;
  scrollbar-width: thin;
}
.timeline {
  min-width: 980px;
  display: grid;
  grid-template-columns: repeat(7, minmax(135px, 1fr));
  position: relative;
  padding: 0.9rem 0.25rem 1.2rem;
}
.timeline:before {
  content: "";
  position: absolute;
  height: 1px;
  left: 7%;
  right: 7%;
  top: 55px;
  background: #0d1e3438;
}
.titem {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 24px 14px 24px;
  justify-items: center;
  gap: 0.5rem;
  min-width: 135px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--n2);
  cursor: pointer;
  scroll-snap-align: center;
}
.tyear {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1;
}
.tlabel {
  color: var(--x);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tdot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--n2);
  border-radius: 50%;
  background: var(--b);
  box-shadow: 0 0 0 5px var(--b);
  transition: 0.2s;
}
.titem:hover,
.titem:focus-visible,
.titem.active {
  color: var(--g);
}
.titem:hover .tlabel,
.titem:focus-visible .tlabel,
.titem.active .tlabel {
  color: var(--n2);
}
.titem:hover .tdot,
.titem:focus-visible .tdot,
.titem.active .tdot {
  width: 12px;
  height: 12px;
  border-color: var(--g);
  background: var(--g);
}
.detail {
  min-height: 150px;
  padding: 1.6rem 2rem;
  border: 0;
  border-left: 3px solid var(--g);
  background: #ffffff8a;
  box-shadow: 0 12px 35px #0d1e340a;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.detail.is-changing {
  opacity: 0;
  transform: translateY(5px);
}
.detail small {
  color: var(--g);
  font-weight: 700;
}
.detail h3 {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 0.3rem 0;
}
.detail p {
  color: var(--x);
}
.docs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.doc {
  background: #fff;
  color: var(--n2);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 420px;
}
.doc-download {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.doc-download img {
  width: 100%;
  aspect-ratio: 0.73;
  object-fit: contain;
}
.doc-download span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0d1e34d8;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.doc-download:hover span,
.doc-download:focus-visible span {
  opacity: 1;
}
.doc-download:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 3px;
}
.doc h3 {
  font-size: 0.9rem;
}
dialog {
  border: 0;
  padding: 1rem;
  max-width: min(880px, calc(100% - 2rem));
  background: var(--c);
}
dialog::backdrop {
  background: #07111ed9;
}
dialog img {
  max-height: 82vh;
  margin: auto;
}
.close {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  width: 44px;
  height: 44px;
  background: var(--n);
  color: #fff;
  border: 1px solid var(--g);
  font-size: 1.4rem;
}
.pubhero,
.cd-section {
  background: var(--b);
}
.ascolti-intro {
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.ascolti-intro .lead {
  max-width: 78ch;
}
.ascolti-intro + .cd-section {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}
.cd-section + .cd-section {
  border-top: 2px solid var(--n2);
}
.pubgrid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.cd-section .pubgrid {
  min-height: 440px;
}
.cd {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.cd-download {
  position: relative;
  display: block;
  width: min(100%, 360px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #0d1e3425;
  color: #fff;
  text-decoration: none;
}
.cd-download-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1e34d9;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.cd-download-label:before {
  content: "↓";
  margin-right: 0.55rem;
  color: var(--g);
  font-size: 1.4rem;
}
.cd-download:hover .cd-download-label,
.cd-download:focus-visible .cd-download-label {
  opacity: 1;
}
.cd-download:focus-visible {
  outline: 3px solid var(--g);
  outline-offset: 4px;
}
.cd-copy {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
}
.cd-copy .lead {
  min-height: 6.6em;
}
.cd-copy .btns {
  margin-top: 2.4rem;
}
.videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 3.6rem;
  margin-top: 2.8rem;
}
.video {
  min-height: 245px;
  border: 1px solid var(--g);
  background: var(--n2);
  display: grid;
  grid-template-columns: minmax(210px, 48%) 1fr;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: 0.2s;
}
.video:hover,
.video:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 45px #0003;
}
.thumb {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 245px;
  background: #0c1727;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.play {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e92327;
  display: grid;
  place-items: center;
}
.play:before {
  content: "";
  margin-left: 6px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #fff;
}
.vinfo {
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vinfo h3 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.8vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
}
.vinfo span {
  color: var(--g);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}
.publication-intro {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.publication-intro .lead {
  max-width: 76ch;
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3.5rem);
  margin-top: clamp(3rem, 4vw, 4.5rem);
}
.research-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
  padding-top: 2rem;
  border-top: 2px solid var(--n2);
}
.research-cover {
  position: relative;
  display: block;
  width: 150px;
  border: 1px solid var(--g);
  background: #fff;
  overflow: hidden;
  transition: 0.2s;
}
.research-cover:hover,
.research-cover:focus-visible,
.transcription-cover:hover,
.transcription-cover:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px #0d1e3425;
  outline: 2px solid var(--g);
}
.research-cover img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.cover-action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #0d1e34d4;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  opacity: 0;
  transition: opacity 0.2s;
}
.research-cover:hover .cover-action,
.research-cover:focus-visible .cover-action,
.transcription-cover:hover .cover-action,
.transcription-cover:focus-visible .cover-action {
  opacity: 1;
}
.research-copy {
  display: flex;
  flex-direction: column;
}
.research-copy .h3 {
  margin-top: 0.7rem;
}
.research-copy > p:not(.pub-subtitle):not(.supervisors) {
  color: var(--x);
}
.research-copy .btn {
  align-self: flex-start;
  margin-top: 1.5rem;
}
.pub-meta,
.publication-data dt {
  color: var(--g);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pub-subtitle {
  margin: 0.8rem 0 1.2rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.25;
}
.supervisors {
  padding: 1rem 0;
  border-top: 1px solid #0d1e3420;
  border-bottom: 1px solid #0d1e3420;
}
.transcription-section {
  padding: clamp(3.5rem, 5vw, 5.5rem) 0;
}
.transcription-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.transcription-cover {
  position: relative;
  display: block;
  width: min(100%, 340px);
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid var(--g);
  background: #fff;
  transition: 0.2s;
}
.transcription-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.transcription-copy .btn {
  margin-top: 2.5rem;
}
.publication-data {
  display: grid;
  gap: 0;
  margin: 2.5rem 0 0;
}
.publication-data > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid #0d1e3420;
}
.publication-data dd {
  margin: 0;
}
.method {
  display: grid;
  grid-template-columns: minmax(300px, 480px) 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.method > .frame {
  aspect-ratio: 3 / 4;
  background: var(--n2);
}
.method > .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.methods {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.methoditem {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
}
.methoditem:before {
  content: "";
  height: 3px;
  background: var(--g);
  margin-top: 0.72rem;
}
.methoditem h3 {
  color: var(--g);
  font-family: var(--sans);
  font-size: 0.91rem;
  text-transform: uppercase;
  margin: 0;
}
.methoditem p {
  margin: 0.35rem 0 0;
  color: #ffffffd9;
}
.methoditem > div {
  min-height: 5.8rem;
}
.types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
.collab {
  display: grid;
  grid-template-columns: 0.8fr 0.95fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.plist {
  list-style: none;
  padding: 0;
  counter-reset: p;
}
.plist li {
  counter-increment: p;
  border-bottom: 1px solid #ffffff25;
  padding: 1.3rem 0;
  display: grid;
  grid-template-columns: 46px 1fr;
}
.plist li:before {
  content: counter(p, decimal-leading-zero);
  color: var(--g);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.contact {
  background: var(--c);
  color: var(--n2);
  padding: clamp(2rem, 3vw, 3.5rem);
}
.contact h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
}
.field {
  margin-bottom: 1.2rem;
}
.field label {
  display: block;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--x);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #0d1e3438;
  background: transparent;
  padding: 0.75rem 0;
}
.field textarea {
  border: 1px solid #0d1e3438;
  padding: 0.8rem;
  min-height: 120px;
}
.status {
  min-height: 1.6em;
  font-size: 0.85rem;
}
.honeypot {
  position: absolute;
  left: -9999px;
}
.contact-success {
  display: grid;
  min-height: 560px;
  align-content: center;
  padding: 3rem;
  border: 1px solid var(--g);
  background: var(--n2);
  color: #fff;
  text-align: center;
}
.contact-success .success-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--g);
  border-radius: 50%;
  color: var(--g);
  font-family: var(--serif);
  font-size: 2rem;
}
.contact-success h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.3rem;
}
.contact-success p {
  color: #dce4ed;
}
footer {
  background: #09182b;
  color: var(--g);
  padding: 2.35rem 0;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.foot > :nth-child(2) {
  text-align: center;
  text-transform: none;
  color: #fff;
}
.foot > :last-child {
  text-align: right;
}
.foot a {
  text-decoration: none;
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: 0.65s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 1180px) {
  .head {
    min-height: 100px;
  }
  .brand {
    width: 95px;
  }
  .toggle {
    display: block;
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--n);
    padding: 1rem 5vw;
    display: none;
  }
  .nav.open {
    display: block;
  }
  .nav ul {
    display: grid;
    gap: 0.1rem;
  }
  .research-grid {
    grid-template-columns: 1fr;
  }
  .hero,
  .pubgrid,
  .method {
    grid-template-columns: 1fr;
  }
  .home-copy {
    margin-top: 0;
  }
  .cards,
  .types {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .project {
    grid-template-columns: 145px 1fr;
  }
  .project .btn {
    grid-column: 2;
  }
  .docs {
    grid-template-columns: repeat(3, 1fr);
  }
  .collab {
    grid-template-columns: 1fr 1fr;
  }
  .contact {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 2rem);
  }
  .section {
    padding: 4rem 0;
  }
  .btn {
    width: 100%;
    min-width: 0;
  }
  .videos {
    grid-template-columns: 1fr;
  }
  .video {
    grid-template-columns: 1fr;
  }
  .docs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .collab {
    grid-template-columns: 1fr;
  }
  .project {
    grid-template-columns: 1fr;
  }
  .project img {
    width: min(240px, 100%);
  }
  .project .btn {
    grid-column: auto;
  }
  .research-card,
  .transcription-grid {
    grid-template-columns: 1fr;
  }
  .research-cover,
  .transcription-cover {
    width: min(100%, 360px);
  }
  .publication-data > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .timeline-head {
    align-items: flex-end;
  }
  .timeline-head p {
    max-width: 22rem;
  }
  .detail {
    padding: 1.35rem 1.3rem;
  }
  .foot {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.7rem;
  }
  .foot > :last-child {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .docs {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}