:root {
  --evidence-card-width: 276px;
}

/* The whole focused navigation enters from beyond the left edge like a stage set. */
.focus-panel {
  transform: translate3d(calc(-100% - 12vw), 0, 0);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(.16, 1, .3, 1),
    opacity .42s ease;
}

body.is-focused .focus-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: .12s, .1s;
}

.focus-controls,
.focus-copy {
  will-change: transform, opacity, filter;
}

body.is-focused .focus-controls {
  animation: focusControlsStageIn .82s .2s cubic-bezier(.16, 1, .3, 1) both;
}

body.is-focused .field-menu-button:nth-child(1) {
  animation: focusMenuItemIn .58s .28s cubic-bezier(.16, 1, .3, 1) both;
}

body.is-focused .field-menu-button:nth-child(2) {
  animation: focusMenuItemIn .58s .36s cubic-bezier(.16, 1, .3, 1) both;
}

body.is-focused .field-menu-button:nth-child(3) {
  animation: focusMenuItemIn .58s .44s cubic-bezier(.16, 1, .3, 1) both;
}

body.is-focused .origin-reset {
  animation: focusMenuItemIn .58s .52s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes focusControlsStageIn {
  from {
    opacity: 0;
    transform: translate3d(-72px, 0, 0);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes focusMenuItemIn {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.focus-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 30px;
}

.focus-cta-group .focus-primary-link,
.focus-cta-group .focus-secondary-link {
  margin-top: 0;
}

.focus-cta-group .focus-secondary-link {
  border-bottom-color: transparent;
  color: rgba(239, 231, 215, .62);
  font-weight: 600;
}

.focus-cta-group .focus-secondary-link:hover,
.focus-cta-group .focus-secondary-link:focus-visible {
  color: #fff;
  border-bottom-color: rgba(239, 231, 215, .42);
  outline: none;
}

.featured-evidence {
  position: absolute;
  z-index: 6;
  left: clamp(318px, 18.5vw, 360px);
  bottom: clamp(74px, 9vh, 104px);
  width: min(880px, 58vw);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 28px, 0);
  filter: blur(5px);
  transition:
    opacity .38s ease,
    transform .62s cubic-bezier(.16, 1, .3, 1),
    filter .46s ease;
}

body.is-focused.is-featured-visible .featured-evidence {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.featured-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .46);
}

.featured-heading p,
.featured-heading span {
  margin: 0;
}

.featured-heading p {
  color: #b9a680;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.featured-heading span {
  font-size: 12px;
  letter-spacing: .04em;
}

.featured-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.evidence-card {
  position: relative;
  min-height: 194px;
  overflow: hidden;
  border: 1px solid rgba(214, 188, 139, .22);
  background:
    linear-gradient(145deg, rgba(22, 20, 17, .76), rgba(7, 7, 7, .44));
  color: #f2eee5;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition:
    transform .32s cubic-bezier(.2, .75, .2, 1),
    border-color .28s ease,
    background .28s ease;
}

.evidence-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .68;
  background:
    radial-gradient(circle at var(--glow-x, 72%) var(--glow-y, 28%), rgba(207, 167, 96, .24), transparent 34%),
    linear-gradient(125deg, transparent 0 52%, rgba(255, 255, 255, .035) 52% 53%, transparent 53% 100%);
  transition: opacity .28s ease, transform .4s ease;
}

.evidence-card:hover,
.evidence-card:focus-visible {
  transform: translate3d(0, -7px, 0);
  border-color: rgba(226, 199, 148, .54);
  background:
    linear-gradient(145deg, rgba(29, 26, 21, .86), rgba(8, 8, 8, .58));
  outline: none;
}

.evidence-card:hover::before,
.evidence-card:focus-visible::before {
  opacity: 1;
  transform: scale(1.04);
}

.evidence-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 194px;
  flex-direction: column;
  padding: 18px;
}

.evidence-type {
  color: #b9a680;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.evidence-title {
  margin: 18px 0 0;
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
}

.evidence-summary {
  margin: 12px 0 20px;
  color: rgba(255, 255, 255, .64);
  font-size: 13px;
  line-height: 1.62;
}

.evidence-meta {
  margin-top: auto;
  color: rgba(255, 255, 255, .38);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.global-info {
  position: absolute;
  z-index: 7;
  left: clamp(28px, 4vw, 70px);
  right: clamp(28px, 4vw, 70px);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px 28px;
  color: rgba(255, 255, 255, .32);
  font-size: 10px;
  letter-spacing: .08em;
  pointer-events: auto;
  transition: color .25s ease;
}

.global-info:hover {
  color: rgba(255, 255, 255, .62);
}

.global-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-right: auto;
}

.global-name strong {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.global-info-item {
  white-space: nowrap;
}

.global-info a {
  color: inherit;
  text-decoration: none;
}

.global-info a:hover,
.global-info a:focus-visible {
  color: #fff;
  outline: none;
}

.status {
  bottom: 46px;
}

@media (max-width: 1180px) {
  .featured-evidence {
    left: clamp(268px, 23vw, 320px);
    width: min(66vw, 780px);
  }

  .evidence-title { font-size: 18px; }
}

@media (max-width: 900px) {
  .featured-evidence {
    left: 24px;
    right: 24px;
    bottom: 74px;
    width: auto;
  }

  .featured-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 78vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }

  .evidence-card { scroll-snap-align: start; }

  .global-info {
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
  }
}

@media (max-width: 760px) {
  .featured-evidence {
    bottom: 58px;
  }

  .featured-heading span { display: none; }

  .global-name span,
  .global-info-item:nth-of-type(2) {
    display: none;
  }

  .status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .focus-panel,
  .featured-evidence,
  .evidence-card {
    transition-duration: .01ms !important;
  }

  body.is-focused .focus-controls,
  body.is-focused .field-menu-button,
  body.is-focused .origin-reset {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}