:root {
  --cream: #f8ecd9;
  --text: #f6f0e8;
  --muted: rgba(246, 240, 232, .68);
  --line: rgba(248, 236, 217, .27);
  --glass: rgba(33, 43, 78, .48);
  --glass-soft: rgba(255, 238, 220, .09);
  --deep: #071125;
  --navy: #101b34;
  --purple: #665887;
  --peach: #e39478;
  --cyan: #7cc7dc;
  --gold: #f5d7ae;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--deep);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.pixel-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 26px clamp(18px, 4vw, 64px) 42px;
  background: url("assets/home-pixel-background.png") center / cover no-repeat;
}

.pixel-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 37px, rgba(124, 199, 220, .14) 38px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(124, 199, 220, .1) 38px);
  opacity: .75;
  mix-blend-mode: screen;
}

.pixel-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 17, 37, .08) 0 44%, rgba(7, 17, 37, .34) 66%, rgba(7, 17, 37, .58) 100%);
  pointer-events: none;
}

.nature-bg {
  background:
    radial-gradient(circle at 28% 16%, rgba(214, 235, 180, .3), transparent 18%),
    radial-gradient(circle at 78% 22%, rgba(124, 199, 220, .28), transparent 19%),
    linear-gradient(180deg, #84aeb8 0%, #526f65 44%, #12251e 100%);
}

.humanities-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(227, 148, 120, .34), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(111, 93, 142, .36), transparent 21%),
    linear-gradient(180deg, #2e496d 0%, #66536a 43%, #0b1328 100%);
}

.media-bg {
  background:
    radial-gradient(circle at 22% 24%, rgba(124, 199, 220, .24), transparent 20%),
    radial-gradient(circle at 78% 20%, rgba(227, 148, 120, .26), transparent 23%),
    linear-gradient(145deg, #18213b, #071125 72%);
}

.pixel-page > .pixel-cloud,
.pixel-page > .pixel-block,
.pixel-page > .pixel-water,
.pixel-page > .pixel-tower,
.pixel-page > .city-lights,
.pixel-page > .city,
.pixel-page > .hills {
  position: absolute;
  image-rendering: pixelated;
  pointer-events: none;
  display: none;
}

.pixel-cloud {
  height: 44px;
  width: 270px;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(229, 146, 139, .7) 6% 15%, transparent 15% 22%, rgba(154, 107, 159, .52) 22% 68%, transparent 68% 100%),
    linear-gradient(90deg, transparent 0 12%, rgba(247, 206, 177, .32) 12% 40%, transparent 40% 100%);
  opacity: .75;
  animation: drift 34s linear infinite;
}

.cloud-left {
  left: 7%;
  top: 23%;
}

.cloud-mid {
  left: 55%;
  top: 10%;
  width: 380px;
  height: 64px;
  animation-duration: 46s;
  animation-delay: -14s;
  opacity: .5;
}

.cloud-right {
  right: 3%;
  top: 26%;
  animation-duration: 39s;
  animation-delay: -7s;
  opacity: .42;
}

.pixel-block {
  width: 6px;
  height: 6px;
  left: 14%;
  top: 11%;
  background: var(--peach);
  box-shadow:
    96px 20px 0 rgba(124, 199, 220, .7),
    220px 54px 0 rgba(245, 215, 174, .9),
    390px 10px 0 rgba(124, 199, 220, .55),
    610px 72px 0 rgba(227, 154, 121, .8),
    820px 28px 0 rgba(245, 215, 174, .7),
    1040px 86px 0 rgba(124, 199, 220, .45);
  animation: pulse 4.8s steps(2, end) infinite;
}

.pixel-water {
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(124, 199, 220, .08) 17px, transparent 18px),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(245, 215, 174, .18) 71px 92px, transparent 93px 140px),
    linear-gradient(180deg, rgba(18, 30, 56, .18), rgba(5, 12, 28, .78));
  opacity: .72;
  transform: skewY(-2deg);
  animation: waterShift 8s steps(8, end) infinite;
}

.pixel-tower {
  left: 6%;
  bottom: 24%;
  width: 42px;
  height: 230px;
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(8, 14, 28, .94) 38% 62%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(8, 14, 28, .96) 0 8px, transparent 9px 22px);
  opacity: .88;
}

.pixel-tower::before,
.pixel-tower::after {
  content: "";
  position: absolute;
  background: rgba(8, 14, 28, .94);
}

.pixel-tower::before {
  left: -34px;
  right: -34px;
  top: 44px;
  height: 12px;
}

.pixel-tower::after {
  left: -20px;
  right: -20px;
  top: 92px;
  height: 10px;
}

.city-lights {
  left: 0;
  right: 0;
  bottom: 18%;
  height: 120px;
  background:
    radial-gradient(circle at 10% 72%, rgba(245, 215, 174, .85) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 54%, rgba(227, 148, 120, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 70%, rgba(245, 215, 174, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 60%, rgba(124, 199, 220, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 72%, rgba(245, 215, 174, .75) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 50%, rgba(227, 148, 120, .78) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 68%, rgba(245, 215, 174, .8) 0 2px, transparent 3px);
  animation: pulse 3.2s steps(2, end) infinite;
}

.hills {
  left: -6vw;
  right: -6vw;
  bottom: 0;
  height: 36%;
  background:
    linear-gradient(160deg, transparent 0 24%, rgba(8, 15, 31, .95) 24% 36%, transparent 36%),
    linear-gradient(26deg, transparent 0 36%, rgba(15, 23, 43, .96) 36% 49%, transparent 49%),
    linear-gradient(8deg, #091326, #111c35 52%, #071125);
  clip-path: polygon(0 36%, 10% 15%, 22% 42%, 35% 18%, 49% 35%, 63% 16%, 78% 40%, 91% 24%, 100% 34%, 100% 100%, 0 100%);
  opacity: .18;
}

.city {
  left: 0;
  right: 0;
  bottom: 11%;
  height: 170px;
  background:
    linear-gradient(90deg, transparent 0 4%, #101a31 4% 7%, transparent 7% 12%, #0c172d 12% 17%, transparent 17% 24%, #111d35 24% 28%, transparent 28% 55%, #101b34 55% 58%, transparent 58% 70%, #101b34 70% 73%, transparent 73% 100%),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(245, 215, 174, .7) 69px 73px, transparent 74px 118px);
  opacity: .2;
}

.site-nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 28px;
  align-items: center;
  max-width: 1640px;
  margin: 0 auto;
}

.home-nav {
  display: flex;
  justify-content: center;
}

.home-nav .nav-links {
  justify-content: center;
}

.monogram {
  width: 58px;
  height: 58px;
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
  color: var(--cream);
}

.monogram span {
  position: absolute;
}

.monogram span:first-child {
  left: 0;
  top: 0;
}

.monogram span:last-child {
  right: 0;
  bottom: 2px;
}

.monogram::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  width: 1px;
  height: 45px;
  background: rgba(248, 236, 218, .55);
  transform: rotate(36deg);
}

.nav-links,
.nav-tools {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2vw, 34px);
  font-size: 15px;
}

.nav-links a {
  color: rgba(245, 240, 232, .86);
  padding: 12px 0;
}

.nav-links a[aria-current="page"] {
  border-bottom: 2px solid var(--gold);
}

.nav-tools {
  color: rgba(245, 240, 232, .66);
}

.tool-icon {
  width: 21px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.glass {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 58% 46%, rgba(227, 154, 121, .18), transparent 24%),
    linear-gradient(135deg, rgba(255, 241, 221, .16), rgba(41, 53, 91, .34)),
    var(--glass);
  box-shadow: 0 28px 95px rgba(2, 8, 24, .48);
  backdrop-filter: blur(20px) saturate(1.22);
}

.home-card {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  min-height: 350px;
  margin: 70px auto 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: center;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 22px;
}

.portal::after {
  content: "↗";
  position: absolute;
  top: 21px;
  right: 24px;
  color: rgba(248, 236, 218, .76);
  font-size: 24px;
}

.avatar {
  width: min(190px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(248, 236, 218, .34);
  box-shadow: 0 0 0 18px rgba(248, 236, 218, .04);
}

.home-copy h1,
.portal h2,
.page-title,
.album h2,
.coming h1 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0;
}

.media-coming {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100vh - 100px);
  place-items: center;
  padding: 32px;
  text-align: center;
}

.media-coming h1 {
  margin: 0;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 9vw, 138px);
  font-weight: 600;
  line-height: .9;
}

.home-copy h1 {
  margin: 0;
  font-size: clamp(54px, 6vw, 78px);
  line-height: .95;
  transform: translateY(-14px);
}

.subtitle {
  display: none;
}

.rule {
  width: 58px;
  height: 1px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(248, 236, 218, .32), rgba(248, 236, 218, .02));
  position: relative;
}

.rule::after {
  content: "";
  position: absolute;
  left: 22px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: rgba(248, 236, 218, .66);
}

.bio,
.lead {
  max-width: 630px;
  color: rgba(255, 251, 244, .88);
  line-height: 1.65;
  font-size: 15px;
}

.profile-lines {
  display: grid;
  gap: 12px;
  max-width: 690px;
}

.profile-lines p {
  margin: 0;
  color: rgba(255, 251, 244, .9);
  line-height: 1.58;
  font-size: 15px;
}

.profile-documents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.profile-documents a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(245, 215, 174, .42);
  text-underline-offset: 4px;
}

.profile-lines span {
  color: #b7b8ff;
  font-weight: 600;
  margin-right: 8px;
}

.research-interest {
  white-space: nowrap;
  font-size: 14px !important;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.glass-button {
  min-width: 128px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(248, 236, 218, .22);
  border-radius: 12px;
  background: rgba(255, 238, 222, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  color: rgba(255, 251, 244, .9);
  font-weight: 600;
}

.button-icon {
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .8;
}

.portals {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 28px;
  max-width: 1460px;
  margin: 0 auto;
  align-items: stretch;
}

.portal {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  padding: 26px;
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease;
}

.portal:hover {
  transform: translateY(-5px);
  border-color: rgba(248, 236, 218, .48);
}

.portal h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.04;
  text-wrap: balance;
}

.portal::after {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  color: transparent;
}

.research-portal {
  background:
    linear-gradient(145deg, rgba(13, 24, 55, .28), rgba(13, 18, 47, .54)),
    url("assets/research-lab-pixel-background-v2.png") center / cover;
}

.research-portal::before {
  display: none;
}

.research-portal::after {
  display: none;
}

.photo-portal {
  background:
    linear-gradient(180deg, rgba(10, 19, 39, .16), rgba(10, 19, 39, .56)),
    url("assets/photos-pixel-background.png") center / cover;
}

.photo-portal::before {
  display: none;
}

.photo-portal::after {
  display: none;
}

.media-portal {
  background:
    linear-gradient(145deg, rgba(13, 20, 50, .22), rgba(13, 14, 40, .58)),
    url("assets/media-pixel-background.png") center / cover;
}

.media-portal::before {
  display: none;
}

.media-portal::after {
  display: none;
}

.portal > p {
  margin: 0;
  color: rgba(255, 251, 244, .75);
  font-size: 14px;
}

.research-layout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  margin-top: 30px;
}

.mini-list {
  display: grid;
  gap: 17px;
  font-size: 12px;
  color: rgba(255, 251, 244, .72);
}

.mini-list div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  line-height: 1.45;
}

.mini-list span,
.micro {
  color: rgba(255, 251, 244, .46);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.featured {
  min-height: 214px;
  border: 1px solid rgba(248, 236, 218, .22);
  border-radius: 12px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(12, 20, 41, .55), rgba(12, 20, 41, .14)),
    url("assets/beijing-03.jpeg") center / cover;
  background-blend-mode: multiply;
}

.featured small {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(6, 11, 23, .4);
  color: rgba(248, 236, 218, .74);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.featured h3 {
  max-width: 220px;
  margin: 34px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  font-size: 24px;
  line-height: 1.1;
}

.carousel {
  position: relative;
  height: 210px;
  margin: 32px 0 18px;
}

.photo-frame {
  position: absolute;
  inset: 22px 44px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(248, 236, 218, .24);
  opacity: .46;
}

.photo-frame.left {
  transform: translateX(-52px) scale(.92);
}

.photo-frame.right {
  transform: translateX(52px) scale(.92);
}

.photo-frame.main {
  inset: 0 92px 10px;
  z-index: 2;
  opacity: 1;
  box-shadow: 0 22px 60px rgba(2, 8, 24, .52);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arrow {
  position: absolute;
  top: 88px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(248, 236, 218, .26);
  background: rgba(7, 17, 37, .3);
  z-index: 3;
}

.arrow.left {
  left: -11px;
}

.arrow.right {
  right: -11px;
}

.network {
  height: 58px;
  position: relative;
}

.network::before {
  content: "";
  position: absolute;
  inset: 13px 22px 0;
  background:
    radial-gradient(circle at 4% 48%, var(--peach) 0 4px, transparent 5px),
    radial-gradient(circle at 18% 20%, rgba(248, 236, 218, .8) 0 4px, transparent 5px),
    radial-gradient(circle at 36% 50%, #aeb2ff 0 4px, transparent 5px),
    radial-gradient(circle at 58% 18%, var(--peach) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 62%, rgba(248, 236, 218, .8) 0 4px, transparent 5px),
    radial-gradient(circle at 96% 34%, var(--peach) 0 4px, transparent 5px),
    linear-gradient(17deg, transparent 0 49%, rgba(248, 236, 218, .32) 50%, transparent 51%),
    linear-gradient(160deg, transparent 0 49%, rgba(124, 199, 220, .24) 50%, transparent 51%);
  animation: pulse 3.8s steps(2, end) infinite;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 32px;
}

.tile {
  min-height: 212px;
  border-radius: 9px;
  border: 1px solid rgba(248, 236, 218, .18);
  padding: 12px;
  display: flex;
  align-items: flex-start;
  color: rgba(255, 251, 244, .68);
  font-size: 12px;
}

.tile:nth-child(1) {
  background: linear-gradient(180deg, rgba(238, 214, 172, .82), rgba(123, 98, 67, .62));
  color: rgba(37, 33, 26, .66);
}

.tile:nth-child(2) {
  background: radial-gradient(circle at 50% 60%, transparent 0 25px, rgba(248, 236, 218, .42) 26px 27px, transparent 28px), linear-gradient(180deg, #163346, #081629);
}

.tile:nth-child(3) {
  background: radial-gradient(circle at 64% 78%, #f2ce8f 0 14px, transparent 15px), linear-gradient(180deg, #8d3f35, #241024);
}

.tile:nth-child(4) {
  background: repeating-linear-gradient(0deg, transparent 0 19px, rgba(25, 28, 34, .18) 20px), linear-gradient(180deg, #ddd9cf, #aeb3b7);
  color: rgba(32, 35, 40, .58);
}

.tile:nth-child(5) {
  background: linear-gradient(150deg, rgba(245, 215, 174, .2), transparent 32%), linear-gradient(180deg, #235640, #173026);
}

.page-shell {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 64px auto 0;
}

.research-page {
  background:
    linear-gradient(180deg, rgba(6, 13, 34, .2), rgba(5, 12, 28, .64)),
    url("assets/research-lab-pixel-background-v2.png") center / cover fixed;
}

.research-page::before {
  opacity: .45;
}

.research-page::after {
  background: linear-gradient(180deg, rgba(7, 17, 37, .12), rgba(7, 17, 37, .67));
}

.sort-controls {
  display: flex;
  gap: 10px;
  margin: 28px 0 -12px;
}

.sort-button {
  min-width: 82px;
  min-height: 38px;
  border: 1px solid rgba(248, 236, 218, .26);
  border-radius: 6px;
  background: rgba(7, 17, 37, .32);
  color: rgba(255, 251, 244, .72);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.sort-button:hover,
.sort-button.is-active {
  border-color: rgba(245, 215, 174, .72);
  background: rgba(245, 215, 174, .14);
  color: var(--cream);
}

.page-title {
  margin: 0 0 18px;
  font-size: clamp(54px, 8vw, 112px);
  line-height: .9;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.project-card,
.album,
.coming {
  padding: 24px;
}

.project-card {
  min-height: 206px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-card h2,
.album h2 {
  margin: 18px 0 12px;
  font-size: 30px;
  line-height: 1.05;
}

.project-card h2 a {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.project-card h2 a:hover {
  color: var(--gold);
}

.project-link-label {
  color: rgba(255, 251, 244, .52);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.project-card p,
.album p,
.coming p {
  color: var(--muted);
  line-height: 1.62;
}

.project-description {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.project-description p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.project-description strong {
  display: block;
  margin-bottom: 2px;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-description em {
  font-style: italic;
}

.project-card a,
.album a,
.coming a {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.photo-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: none;
  margin: 46px 0 0;
}

.photo-page {
  background:
    linear-gradient(180deg, rgba(5, 18, 31, .14), rgba(5, 12, 28, .56)),
    url("assets/photo-split-pixel-background.png") center / cover fixed;
}

.photo-page::before {
  opacity: .32;
}

.photo-page::after {
  background: linear-gradient(180deg, rgba(7, 17, 37, .1), rgba(7, 17, 37, .55));
}

.photo-collection {
  margin-top: 46px;
  align-items: start;
}

.photo-collection-intro {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 72px auto -14px;
  padding: 0 30px;
  color: rgba(255, 251, 244, .87);
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  text-shadow: 0 2px 14px rgba(4, 10, 27, .76);
}

.photo-collection-intro p {
  margin: 0;
}

.photo-panel {
  min-height: calc(100vh - 132px);
  padding: 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.photo-side {
  min-height: 690px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.photo-side h1 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  font-size: clamp(52px, 6vw, 96px);
  line-height: .9;
}

.album-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.album-branch {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.branch-title {
  min-height: 180px;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(248, 236, 218, .28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(14, 26, 54, .38), rgba(14, 26, 54, .66)),
    url("assets/photo-split-pixel-background.png") right center / auto 170% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
}

.shsbnu-albums {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(248, 236, 218, .3);
}

.album-card {
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border-radius: 8px;
  background: rgba(14, 26, 54, .38);
  backdrop-filter: blur(16px) saturate(1.15);
}

.album-card h2 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.06;
}

.album-card h2 a {
  color: inherit;
  text-decoration: none;
}

.album-card h2 a:hover {
  color: var(--gold);
}

.photo-window {
  aspect-ratio: 1 / .72;
  overflow: hidden;
  border: 1px solid rgba(248, 236, 218, .2);
  border-radius: 10px;
  background: rgba(7, 17, 37, .35);
}

.photo-entry {
  display: block;
  cursor: pointer;
}

.photo-entry:hover {
  border-color: rgba(245, 215, 174, .76);
}

.photo-rail {
  display: flex;
  width: 600%;
  height: 100%;
  animation: photoRail 22s ease-in-out infinite;
}

.photo-rail.two-up {
  width: 400%;
}

.photo-rail.six-up {
  width: 1200%;
  animation-name: photoRailSix;
  animation-duration: 36s;
}

.photo-rail img {
  width: calc(100% / 6);
  height: 100%;
  flex: 0 0 calc(100% / 6);
  object-fit: cover;
  border-radius: 8px;
}

.photo-rail.two-up img {
  width: 25%;
  flex-basis: 25%;
}

.photo-rail.six-up img {
  width: calc(100% / 12);
  flex-basis: calc(100% / 12);
}

.album-card:nth-child(2n) .photo-rail {
  animation-direction: reverse;
  animation-duration: 26s;
}

.album-card:nth-child(3n) .photo-rail {
  animation-duration: 30s;
}

@keyframes photoRail {
  0%, 10% {
    transform: translateX(0);
  }
  33%, 43% {
    transform: translateX(-16.6667%);
  }
  66%, 76% {
    transform: translateX(-33.3333%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes photoRailTwo {
  0%, 16% {
    transform: translateX(0);
  }
  50%, 66% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes photoRailSix {
  0%, 7% { transform: translateX(0); }
  16%, 23% { transform: translateX(-8.3333%); }
  32%, 39% { transform: translateX(-16.6667%); }
  48%, 55% { transform: translateX(-25%); }
  64%, 71% { transform: translateX(-33.3333%); }
  80%, 87% { transform: translateX(-41.6667%); }
  100% { transform: translateX(-50%); }
}

.photo-rail.two-up {
  animation-name: photoRailTwo;
}

.gallery-shell {
  position: relative;
  z-index: 2;
  max-width: 1460px;
  margin: 54px auto 0;
  padding: 0 clamp(18px, 4vw, 64px) 60px;
}

body.nature-gallery .photo-page {
  background:
    linear-gradient(180deg, rgba(10, 31, 23, .14), rgba(5, 20, 14, .61)),
    url("assets/nature-pixel-background.png") center / cover fixed;
}

body.humanities-gallery .photo-page {
  background:
    linear-gradient(180deg, rgba(14, 20, 49, .14), rgba(8, 11, 30, .64)),
    url("assets/humanities-pixel-background.png") center / cover fixed;
}

.gallery-shell h1 {
  margin: 22px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  font-size: clamp(50px, 7vw, 96px);
  font-weight: 600;
  line-height: .95;
}

.gallery-description {
  max-width: 820px;
  margin: 0 0 30px;
  color: rgba(255, 251, 244, .87);
  font-size: 16px;
  line-height: 1.75;
  text-shadow: 0 2px 14px rgba(4, 10, 27, .76);
}

.gallery-back {
  color: rgba(255, 251, 244, .74);
  font-size: 13px;
}

.gallery-back:hover {
  color: var(--gold);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.photo-frame-card {
  aspect-ratio: 4 / 3;
  padding: 5px;
  border: 1px solid rgba(248, 236, 218, .22);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(246, 239, 222, .92), rgba(160, 154, 149, .82));
  box-shadow: 0 18px 40px rgba(1, 8, 22, .38);
  cursor: zoom-in;
}

.photo-frame-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.photo-frame-card:hover {
  transform: translateY(-4px) rotate(.3deg);
}

.photo-dialog {
  max-width: min(94vw, 1600px);
  max-height: 94vh;
  padding: 42px 12px 12px;
  border: 1px solid rgba(248, 236, 218, .36);
  border-radius: 8px;
  background: rgba(5, 12, 28, .95);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .7);
}

.photo-dialog::backdrop {
  background: rgba(1, 6, 18, .78);
  backdrop-filter: blur(6px);
}

.photo-dialog img {
  display: block;
  max-width: calc(94vw - 24px);
  max-height: calc(94vh - 54px);
  object-fit: contain;
}

.dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.topic-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1 / .8;
  overflow: hidden;
  border: 1px solid rgba(248, 236, 218, .24);
  border-radius: 7px;
  background: rgba(7, 17, 37, .32);
}

.topic-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .74;
  transition: transform .25s ease, opacity .25s ease;
}

.topic-grid span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .7);
}

.topic-grid a:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.topic-rail {
  position: absolute;
  inset: 0;
  display: flex;
  width: 600%;
  height: 100%;
  animation: photoRail 24s ease-in-out infinite;
}

.topic-rail img,
.topic-grid a:hover .topic-rail img {
  width: calc(100% / 6);
  height: 100%;
  flex: 0 0 calc(100% / 6);
  object-fit: cover;
  opacity: .78;
  transform: none;
}

.topic-grid a:nth-child(2n) .topic-rail {
  animation-direction: reverse;
  animation-duration: 28s;
}

.topic-grid a:nth-child(3n) .topic-rail {
  animation-duration: 32s;
}

.album {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
}

.album img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(248, 236, 218, .18);
}

.coming {
  max-width: 980px;
  margin: 74px auto 0;
}

.coming h1 {
  margin: 0 0 18px;
  font-size: clamp(58px, 8vw, 120px);
  line-height: .9;
}

@keyframes drift {
  from {
    transform: translate3d(-22px, 0, 0);
  }
  to {
    transform: translate3d(46px, 0, 0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: .55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes waterShift {
  0%, 100% {
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    background-position: 0 8px, 42px 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    grid-template-columns: auto 1fr;
  }

  .nav-tools {
    display: none;
  }

  .portals,
  .page-grid,
  .photo-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .pixel-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-nav,
  .home-card,
  .research-layout,
  .album {
    grid-template-columns: 1fr;
  }

  .nav-links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .home-card {
    margin-top: 36px;
  }

  .avatar {
    width: 150px;
  }

  .research-interest {
    white-space: normal;
  }

  .photo-frame.main {
    inset-left: 64px;
    inset-right: 64px;
  }

  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}