@font-face {
  font-family: "Zihun Main KV";
  src: url("assets/fonts/zihun-5-main-kv-subset.woff2") format("woff2");
  font-display: swap;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@font-face {
  font-family: "DIN Main KV";
  src: url("assets/fonts/din-light-main-kv-subset.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
}

.cover .year,
.cover h1,
.page h2 {
  font-family: "Zihun Main KV", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

.cover .english,
.cover .cover-event,
.page .eyebrow,
.page .section-index {
  font-family: "DIN Main KV", "DIN Next LT Pro", Arial, sans-serif;
  font-weight: 300;
}

.kv-title-lockup {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 26px auto 10px;
  filter: drop-shadow(0 8px 18px rgba(0, 26, 112, 0.2));
  transform-origin: 50% 55%;
}

.cover .kv-title-lockup {
  width: min(82%, 390px);
}

.page.is-active .kv-title-lockup {
  animation: kvTitleArrival 1.15s cubic-bezier(.2,.82,.2,1) both,
    kvTitleGlow 3.6s ease-in-out 1.15s infinite;
}

.closing .kv-title-lockup {
  width: min(100%, 320px);
  margin: 12px 0 10px;
}

.closing .closing-landscape {
  height: 170px;
  opacity: .82;
}

.cover .cover-date-plain {
  margin: 28px auto 0;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .5px;
  color: #efffff;
  font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  text-align: center;
}

.cover .cover-location {
  margin-top: 30px;
  font-size: 11px;
}

.cover #countdown {
  font-size: 12px;
}

.cover .cover-event {
  margin: 0 auto;
  max-width: 100%;
  color: #f5fbff;
  font-family: "Zihun Main KV", "Microsoft YaHei", sans-serif;
  font-size: clamp(17px, 4.5vw, 21px);
  line-height: 1.55;
  letter-spacing: .5px;
  text-align: center;
}

.cover .cover-brand-mask {
  position: relative;
  width: min(82%, 390px);
  aspect-ratio: 1800 / 296;
  height: auto;
  margin: 26px auto 14px;
  overflow: hidden;
}

.cover .cover-brand-source {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.cover .cover-main-title {
  margin: 8px 0 10px;
  font-size: clamp(15px, 4.6vw, 21px);
  line-height: 1.55;
  letter-spacing: 0;
  white-space: normal;
  text-align: center;
}

.chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chrome-right #music {
  width: 30px;
  height: 30px;
}

.site-logo {
  display: block;
  width: clamp(90px, 27vw, 114px);
  height: auto;
  filter: drop-shadow(0 2px 7px rgba(0, 24, 92, .3));
}

.cover .cover-title-line {
  display: block;
  position: relative;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: inherit;
  white-space: nowrap;
}

.cover .cover-title-primary {
  font-size: clamp(14px, 4.5vw, 20px);
}

.cover .cover-title-secondary {
  font-size: clamp(14px, 4.5vw, 20px);
}

.cover .cover-title-english {
  margin: 0 auto;
  max-width: 390px;
  font-family: Arial, sans-serif;
  font-size: clamp(7px, 2.3vw, 10px);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  color: #efffff;
}

.cover .cover-title-english {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.cover-title-english > span { display: block; white-space: nowrap; }

#swipe-cue {
  position: absolute;
  z-index: 12;
  left: calc(50% - 12px);
  bottom: calc(54px + env(safe-area-inset-bottom));
  width: 24px;
  height: 14px;
  color: #c8ffff;
  pointer-events: none;
  animation: swipeCueRise 1.8s ease-in-out infinite;
}

#swipe-cue svg { display: block; width: 100%; height: 100%; }
#swipe-cue[hidden] { display: none; }

@keyframes swipeCueRise {
  0% { opacity: 0; transform: translateY(8px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  #swipe-cue { animation: none; opacity: 1; }
}

@media (max-width: 340px) {
  .chrome {
    padding-left: 18px;
    padding-right: 18px;
  }

  .wordmark {
    font-size: 9px;
    letter-spacing: .4px;
  }

  .chrome-right {
    gap: 5px;
  }

  .site-logo {
    width: 80px;
  }
}

.agenda-full .content {
  padding-top: 76px;
}

.agenda-full h2 {
  margin: 8px 0 4px;
  font-size: 31px;
}

.agenda-full .time-range {
  margin: 4px 0 10px;
  font-size: 20px;
}

.agenda-full .schedule article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.agenda-full .schedule time {
  font-size: 9.5px;
  white-space: nowrap;
}

.agenda-full .schedule p {
  margin-top: 0;
  font-size: 11.5px;
  line-height: 1.38;
}

.agenda-full .agenda-english {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 2px;
}

.agenda-full .schedule small {
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #ffe0a3;
}

.venue-page .content {
  padding-top: 82px;
}

.venue-page h2 {
  margin: 10px 0 14px;
  font-size: 32px;
}

.venue-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.venue-heading strong {
  font-size: 15px;
  font-weight: 400;
  color: #f5ffff;
}

.venue-heading span {
  font-size: 10px;
  color: #bcecff;
}

.venue-map {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(162, 244, 255, .46);
  background:
    linear-gradient(145deg, rgba(104, 238, 246, .12), transparent 55%),
    linear-gradient(165deg, #0637af, #035bbd);
  box-shadow: inset 0 0 36px rgba(3, 20, 98, .42);
}

.venue-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.88) contrast(1.06);
}

.venue-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(2, 43, 140, .08), rgba(1, 31, 114, .2));
  pointer-events: none;
}

.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
}

.map-pin i {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid #b7ffff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(131, 253, 255, .14), 0 0 25px rgba(120, 255, 255, .55);
}

.map-pin i::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 15px auto;
  border-radius: 50%;
  background: #c5ffff;
}

.map-pin b {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
}

.venue-map small {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  font-size: 8px;
  letter-spacing: .5px;
  color: #bcecff;
}

.transport-list {
  margin-top: 12px;
}

.transport-list > div {
  padding: 9px 0;
  border-bottom: 1px solid rgba(132, 237, 238, .22);
}

.transport-list span {
  font-size: 11px;
  color: #a7ffff;
}

.transport-list p {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.65;
  color: #e5f7ff;
}

.venue-nav {
  margin-top: 12px;
}

.venue-page .back {
  margin-top: 6px;
}

.cover.is-active h1.cover-main-title.reveal {
  animation-name: coverThemeInOneLine;
}

@keyframes coverThemeInOneLine {
  from {
    opacity: 0;
    transform: translateY(38px);
    filter: blur(12px);
    letter-spacing: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    letter-spacing: 0;
  }
}

.market h2 {
  white-space: nowrap;
  letter-spacing: .3px;
}

.market h2 > .title-join {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.letter .details strong,
.letter .details p {
  color: #f5fbff;
}

.spark-field i {
  animation-play-state: paused;
}

.page.is-active .spark-field i {
  animation-play-state: running;
}

@media (max-width: 600px) {
  .reveal {
    filter: none;
  }

  .page.is-active .kv-title-lockup {
    animation: kvTitleArrivalLite .85s cubic-bezier(.2,.82,.2,1) both;
  }
}

@keyframes kvTitleArrivalLite {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes kvTitleArrival {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.9);
    filter: blur(8px) drop-shadow(0 0 0 rgba(80, 223, 255, 0));
  }
  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.018);
    filter: blur(0) drop-shadow(0 0 24px rgba(80, 223, 255, .55));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 8px 18px rgba(0, 26, 112, .2));
  }
}

@keyframes kvTitleGlow {
  0%, 100% {
    filter: drop-shadow(0 8px 18px rgba(0, 26, 112, .2));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(79, 229, 255, .42));
  }
}

.cover .year.invitation-title {
  margin-top: 28px;
  font-size: 64px;
  letter-spacing: 12px;
}

/* Keep every invitation screen complete inside common mobile browser viewports. */
@media (max-width: 600px) and (max-height: 900px) {
  .content {
    padding: 78px 26px 72px;
  }

  .cover .content {
    padding-bottom: 112px;
  }

  .letter-poem {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.45;
  }

  .letter .salutation {
    margin-bottom: 10px;
  }

  .letter .details > div {
    padding: 7px 0;
  }

  .agenda h2 {
    margin: 10px 0 8px;
    font-size: 30px;
    line-height: 1.22;
  }

  .agenda h2 > span {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
  }

  .agenda .time-range {
    margin: 8px 0 16px;
    font-size: 22px;
  }

  .agenda .schedule article {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .agenda .schedule time {
    font-size: 10px;
  }

  .agenda .schedule p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
  }

  .agenda .schedule small {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  .agenda-full .content {
    padding-top: 64px;
    padding-bottom: 62px;
  }

  .agenda-full h2 {
    margin: 6px 0 2px;
    font-size: 28px;
  }

  .agenda-full .time-range {
    margin: 2px 0 8px;
    font-size: 18px;
  }

  .agenda-full .schedule article {
    margin-bottom: 3px;
    padding-bottom: 3px;
  }

  .agenda-full .schedule p {
    margin-top: 1px;
    font-size: 10.8px;
  }

  .venue-page .content {
    padding-top: 70px;
  }

  .venue-map {
    height: 170px;
  }

  .market h2 {
    margin: 8px 0 4px;
    font-size: 30px;
  }

  .market .time-range,
  .market .venue {
    margin-bottom: 8px;
  }

  .market .schedule article {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .market .schedule p {
    font-size: 11.5px;
    line-height: 1.5;
  }

  .market .schedule small {
    font-size: 9.5px;
    line-height: 1.45;
  }

  .closing h2 {
    margin: 10px 0;
    font-size: 31px;
  }

  .closing-message {
    margin-bottom: 12px;
  }

  .closing .kv-title-lockup {
    width: min(100%, 290px);
    margin: 7px 0 6px;
  }

  .locations > a {
    padding: 9px 0;
  }

  .registration {
    margin: 12px 0;
  }

  #qr {
    width: 76px;
    height: 76px;
  }

  .organizer {
    margin-top: 12px;
  }

  .navigation {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) and (max-height: 720px) {
  .content {
    padding-top: 54px;
    padding-bottom: 52px;
  }

  .letter-poem {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
  }

  .letter .salutation {
    margin-bottom: 8px;
  }

  .letter .details > div {
    padding: 5px 0;
  }

  .agenda h2 {
    font-size: 27px;
  }

  .agenda .time-range {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .agenda .schedule article {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .agenda .schedule p {
    font-size: 11px;
  }

  .agenda-full .content {
    padding-top: 52px;
    padding-bottom: 46px;
  }

  .agenda-full h2 {
    font-size: 24px;
  }

  .agenda-full .time-range {
    font-size: 17px;
  }

  .agenda-full .schedule article {
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  .agenda-full .schedule time {
    font-size: 8.6px;
  }

  .agenda-full .schedule p {
    font-size: 10px;
    line-height: 1.25;
  }

  .agenda-full .schedule small {
    font-size: 10px;
  }

  .venue-page .content {
    padding-top: 54px;
  }

  .venue-page h2 {
    margin: 6px 0 8px;
    font-size: 26px;
  }

  .venue-map {
    height: 135px;
  }

  .transport-list > div {
    padding: 5px 0;
  }

  .market .schedule p {
    font-size: 10.5px;
    line-height: 1.4;
  }

  .market .schedule small {
    font-size: 9px;
    line-height: 1.4;
  }

  .market .schedule article {
    margin-bottom: 3px;
    padding-bottom: 3px;
  }

  .closing-message {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.6;
  }

  .locations > a {
    padding: 5px 0;
  }

  .registration {
    margin: 7px 0;
  }

  #qr {
    width: 64px;
    height: 64px;
  }

  .organizer {
    margin-top: 8px;
  }

  .cover .year.invitation-title {
    margin-top: 16px;
    font-size: 52px;
    letter-spacing: 10px;
  }

  .kv-title-lockup {
    margin-top: 18px;
    margin-bottom: 7px;
  }

  .cover .cover-brand-mask {
    margin: 18px auto 10px;
  }

  .cover .cover-main-title {
    margin: 6px 0 8px;
    font-size: clamp(14px, calc((100vw - 52px) / 16), 25px);
    line-height: 1.25;
  }

  .cover .cover-event {
    font-size: clamp(16px, 4.3vw, 19px);
  }
}

/* Campus plan annotations stay aligned with the supplied campus drawing. */
.campus-map-button {
  display: block;
  width: min(100%, 350px);
  margin: 0 auto;
  padding: 0;
  border: 1px solid #b9eaff;
  background: #fff;
  cursor: zoom-in;
}
.campus-plan { display: block; width: 100%; height: auto; }
.gate-lines { fill: none; stroke: #064ca7; stroke-width: 7; }
.gate-dots { fill: #064ca7; stroke: #fff; stroke-width: 5; }
.gate-labels, .venue-labels {
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0;
  fill: #064ca7;
  stroke: #fff;
  stroke-width: 9;
  paint-order: stroke;
}
.venue-lines { fill: none; stroke: #d72e36; stroke-width: 9; }
.venue-labels { fill: #c51c2a; font-size: 52px; }
.map-expand-hint {
  display: block;
  padding: 5px;
  color: #174b7a;
  background: #eef8ff;
  font: 10px/1.4 'Microsoft YaHei', sans-serif;
}
#campus-map-dialog {
  width: min(96vw, 900px);
  max-width: 96vw;
  max-height: 92dvh;
  margin: auto;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  color: #153960;
  background: white;
  overflow: auto;
}
#campus-map-dialog::backdrop { background: #001331cc; }
#campus-map-dialog header { display: flex; align-items: center; justify-content: space-between; }
#close-campus-map { padding: 10px; color: #153960; border: 0; background: #edf5fc; border-radius: 4px; }
#campus-map-dialog p { margin: 8px 0 0; font-size: 12px; text-align: center; }
#campus-map-detail { overflow: auto; }
#campus-map-detail .campus-plan { min-width: 650px; }
.venue-page .transport-list > div { padding: 6px 0; }
.venue-page .venue-heading { margin-bottom: 10px; }
@media (max-height: 720px) {
  .campus-map-button { width: min(100%, 290px); }
}

/* Keep the three screens within the viewport, with space allocated to the map and agenda. */
.cover .cover-title-primary,
.cover .cover-title-secondary { font-size: clamp(16px, 5.2vw, 24px); }
.agenda-full, .venue-page { height: 100%; }
.agenda-full .content, .venue-page .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(68px + env(safe-area-inset-top));
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
.agenda-full h2, .venue-page h2 { margin: 0 0 4px; font-size: 29px; line-height: 1.25; }
.agenda-full .agenda-english, .venue-page .venue-english {
  margin: 0 0 13px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 2px;
}
.agenda-full .content { padding-bottom: calc(clamp(110px, 14vh, 160px) + env(safe-area-inset-bottom)); }
.agenda-full .agenda-english { margin-bottom: 8px; }
.agenda-full .time-range { margin: 0 0 10px; font-size: 18px; }
.agenda-full .schedule {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.agenda-full .schedule article { margin: 0; padding: 4px 0 7px; gap: 12px; }
.agenda-full .schedule p { margin: 0; font-size: 11.5px; line-height: 1.5; }
.agenda-full .schedule small { margin-top: 5px; font-size: 10px; line-height: 1.4; }
.venue-page .venue-heading { gap: 3px; margin: 0 0 12px; }
.venue-page .venue-heading strong { font-size: 13px; }
.venue-page .venue-heading > span { font-size: 9px; }
.venue-page .campus-map-button {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 22px #001a7430;
  background: #fff;
}
.campus-map-button .campus-plan { flex: 1; min-height: 0; width: 100%; height: 100%; }
.gate-labels { font-size: 42px; font-weight: 500; fill: #25485f; stroke-width: 12; }
.gate-dots { fill: #54788d; stroke-width: 5; }
.venue-markers circle { fill: #e7a842; stroke: #fff; stroke-width: 9; }
.venue-markers text {
  fill: #172d47;
  font: bold 48px Arial, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}
.map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  flex-shrink: 0;
  padding: 10px 7px;
  background: #f2f6f8;
  color: #23425b;
  font: 11px/1.2 'Microsoft YaHei', sans-serif;
}
.map-legend b { display: inline-block; padding: 2px 5px; border-radius: 50%; background: #e7a842; color: #172d47; font: bold 10px Arial; }
.map-legend small { font-size: 9px; color: #6d8291; }
.venue-page .transport-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 12px; }
.venue-page .transport-list > div { padding: 0; border: 0; }
.venue-page .transport-list span { font-size: 11px; }
.venue-page .transport-list p { margin: 4px 0 0; font-size: 10px; line-height: 1.55; }
.venue-page .venue-nav { flex-shrink: 0; margin: 10px 0 0; padding: 8px 0; font-size: 12px; }
.venue-page .back { display: none; }
#campus-map-dialog .map-legend { margin-top: 8px; }
@media (max-height: 680px) {
  .agenda-full .content, .venue-page .content { padding-top: calc(60px + env(safe-area-inset-top)); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .agenda-full h2, .venue-page h2 { font-size: 25px; }
  .agenda-full .agenda-english, .venue-page .venue-english { margin-bottom: 8px; }
  .agenda-full .time-range { margin-bottom: 8px; font-size: 16px; }
  .agenda-full .schedule article { padding: 2px 0 4px; gap: 8px; grid-template-columns: 76px minmax(0, 1fr); }
  .agenda-full .schedule p { font-size: 10.5px; line-height: 1.35; }
  .agenda-full .schedule small { margin-top: 3px; font-size: 9.5px; }
  .venue-page .venue-heading { margin-bottom: 8px; }
  .venue-page .transport-list { margin-top: 8px; }
}
@media (max-height: 680px) {
  .agenda-full .content { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
}

/* Blend the original plan into the invitation palette without changing its geography. */
.venue-page .campus-map-button { background: #acd6e6; border: 1px solid #b8eaff60; }
.campus-map-button .campus-plan { isolation: isolate; background: #acd6e6; }
.campus-map-button .campus-plan image { mix-blend-mode: multiply; }
.campus-map-button .gate-labels { stroke: #acd6e6; fill: #153d5a; }
.campus-map-button .map-legend { background: #174e82; color: #ecfbff; }
.campus-map-button .map-legend small { color: #b4dbe9; }
.venue-page .venue-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 9px 0 0;
  padding: 10px 14px;
  border: 1px solid #92edff80;
  border-radius: 6px;
  background: #087abb;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
#campus-map-dialog { background: #174e82; color: #ecfbff; }
#campus-map-detail .campus-plan { isolation: isolate; background: #acd6e6; }
#campus-map-detail .campus-plan image { mix-blend-mode: multiply; }
#campus-map-detail .gate-labels { stroke: #acd6e6; fill: #153d5a; }
#campus-map-dialog .map-legend { background: #174e82; color: #ecfbff; }
#campus-map-dialog .map-legend small { display: none; }

/* Revised cover hierarchy: event title above the centered invitation. */
.event-brand { display: block; width: clamp(120px, 36vw, 173px); height: auto; }
.chrome-right #music { position: absolute; top: calc(58px + env(safe-area-inset-top)); right: 28px; }
.cover .content { height: 100%; padding-top: calc(clamp(120px, 19vh, 170px) + env(safe-area-inset-top)); }
.cover .cover-main-title { margin: 0 0 12px; line-height: 1.55; }
.cover .year.invitation-title {
  margin: clamp(20px, 4.5vh, 45px) auto 0;
  text-align: center;
  font-size: clamp(62px, 18vw, 86px);
  line-height: 1.3;
  letter-spacing: 10px;
  text-indent: 10px;
}
.cover #countdown { margin-top: 35px; text-align: center; }
.cover .year.invitation-title > span {
  display: block;
  margin-top: 8px;
  font: 300 12px/1.4 Arial, sans-serif;
  letter-spacing: 6px;
  text-indent: 6px;
}
.agenda-full .time-range.event-date { font-family: Arial, 'Microsoft YaHei', sans-serif; font-size: 13px; letter-spacing: .5px; }
.campus-roads { fill: none; stroke-linecap: butt; stroke-linejoin: bevel; }
.road-edge { stroke: #839fa6; stroke-width: 72; }
.road-surface { stroke: #c0cfd0; stroke-width: 65; }
.road-center { stroke: #f2e6b4; stroke-width: 3; stroke-dasharray: 18 12; }
.road-names { fill: #e7a842; stroke: #25485f; stroke-width: 8; paint-order: stroke; font: 700 54px 'Microsoft YaHei', sans-serif; letter-spacing: 2px; }
.road-name-vertical { writing-mode: vertical-rl; text-orientation: upright; }
@media (max-width: 340px) {
  .event-brand { width: 120px; }
  .chrome-right #music { right: 18px; }
}
@media (max-height: 680px) {
  .cover .content { padding-top: calc(105px + env(safe-area-inset-top)); }
  .cover .year.invitation-title { margin-top: 20px; }
}

/* Fit the bilingual afternoon agenda on one mobile screen without hiding source wording. */
.agenda-full .schedule article {
  align-items: start;
  padding-top: 2px;
  padding-bottom: 3px;
}
.agenda-full .schedule p { line-height: 1.28; }
.agenda-full .schedule p > span { display: block; }
.agenda-full .schedule .speaker-cn {
  margin-top: 1px;
  color: #d7e9ff;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.22;
}
.agenda-full .schedule .schedule-en {
  margin-top: 1px;
  color: #acd5f5;
  font: 400 8.5px/1.25 Arial, sans-serif;
  letter-spacing: 0;
}
@media (max-height: 760px) {
  .agenda-full .content {
    padding-top: calc(56px + env(safe-area-inset-top));
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .agenda-full h2 { font-size: 23px; }
  .agenda-full .agenda-english { margin-bottom: 5px; }
  .agenda-full .time-range.event-date { margin-bottom: 5px; font-size: 11.5px; }
  .agenda-full .schedule article {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 7px;
    padding-top: 1px;
    padding-bottom: 2px;
  }
  .agenda-full .schedule time { font-size: 8px; }
  .agenda-full .schedule p { font-size: 9.4px; line-height: 1.2; }
  .agenda-full .schedule .speaker-cn { font-size: 8px; line-height: 1.15; }
  .agenda-full .schedule .schedule-en { font-size: 7.2px; line-height: 1.16; }
}