/*
 * Visual fusion layer:
 * preserves the classical portrait system while introducing the fixed archive
 * interface, scroll-scaled image field, and high-contrast outro language.
 */

@font-face {
  font-family: "HY Hero Display";
  src: url("./public/assets/fonts/HYDiShengYingXiongTiW-subset.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --calligraphy-cn: "HY Hero Display", "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif;
}

.hero h1,
.threshold blockquote,
.spatial-copy h2,
.section-heading h2,
.materials-heading h2,
.process-heading h2,
.stage h3,
.details-heading h2,
.reading-heading h2,
.analysis-panel h3,
.material-entry h3,
.finale-copy h2,
.finale-character,
.archive-view span {
  font-family: var(--calligraphy-cn);
  font-weight: 400;
  letter-spacing: 0.035em;
}

.wordmark-mark,
.hero-seal,
.archive-symbol,
.archive-cursor span,
.texture-switch button,
.analysis-tabs button,
.archive-card figcaption strong,
.analysis-map text {
  font-family: var(--calligraphy-cn);
}

.hero h1 {
  line-height: 1.08;
  text-shadow: 0 0 0.01px currentColor;
}

.stage h3,
.analysis-panel h3,
.archive-view span {
  line-height: 1.14;
}

.site-header,
.site-header.is-solid {
  color: #fff;
  background: transparent;
  border: 0;
  mix-blend-mode: exclusion;
  backdrop-filter: none;
}

.site-header .wordmark-mark {
  color: #000;
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.site-header .progress-rule {
  background: rgba(255, 255, 255, 0.34);
}

.site-header .progress-rule i,
.site-header .nav-links a::after {
  background: #fff;
}

.archive-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate3d(-80px, -80px, 0);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    opacity 0.2s ease;
  will-change: transform;
}

.archive-cursor.is-visible {
  opacity: 1;
}

.archive-cursor.is-contextual {
  width: 58px;
  height: 58px;
}

.archive-cursor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.archive-cursor span {
  position: relative;
  font-family: var(--serif-cn);
  font-size: 12px;
  line-height: 1;
}

@media (min-width: 1024px) and (pointer: fine) {
  html.custom-cursor-enabled,
  html.custom-cursor-enabled a,
  html.custom-cursor-enabled button,
  html.custom-cursor-enabled .scroll-3d {
    cursor: none !important;
  }
}

.archive-hero-meta {
  position: fixed;
  right: 32px;
  bottom: 46px;
  z-index: 19;
  display: grid;
  width: 330px;
  grid-template-columns: 42px 1fr auto;
  align-items: end;
  gap: 18px;
  color: #fff;
  opacity: var(--hero-meta-opacity, 1);
  pointer-events: none;
  mix-blend-mode: exclusion;
  transform: translateY(var(--hero-meta-y, 0));
  will-change: opacity, transform;
}

.archive-symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--serif-cn);
  font-size: 12px;
}

.archive-hero-meta > p {
  margin: 0 0 1px;
  font-family: var(--display);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.archive-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.archive-count strong {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.05em;
}

.archive-count em {
  margin-top: 11px;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.2em;
}

.archive-gallery.details {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: clip;
  color: #fff;
  background: #050505;
}

.archive-gallery.details::before {
  display: none;
}

.archive-gridline {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 25vw 25vw;
  background-position: -1px -1px;
}

.archive-heading.details-heading {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 0.55fr 1.25fr 0.75fr;
  align-items: center;
  gap: 6vw;
  margin: 0;
  padding: 17vh 6.3vw 12vh;
}

.archive-heading .section-kicker {
  align-self: center;
  color: #fff;
}

.archive-heading h2 {
  color: #fff;
  font-size: clamp(4.4rem, 7.7vw, 9.2rem);
  line-height: 1.04;
}

.archive-heading > p:last-child {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.archive-index {
  position: sticky;
  top: 78px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  margin: 0 24px;
  padding: 15px 0;
  color: #24231f;
  background: rgba(229, 225, 215, 0.92);
  border-top: 1px solid rgba(47, 41, 31, 0.2);
  border-bottom: 1px solid rgba(47, 41, 31, 0.2);
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.14em;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.archive-grid {
  position: relative;
  z-index: 2;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(70px, 7vw, 112px) clamp(16px, 2.2vw, 38px);
  padding: 16vh 5.5vw 22vh;
  background: #e5e1d7;
}

.archive-card {
  position: relative;
  display: grid;
  height: auto;
  margin: 0;
  grid-template-rows: auto auto;
}

.archive-card::after {
  display: none;
}

.archive-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 0.75;
  filter: saturate(0.82) contrast(0.98) brightness(1.02);
  object-fit: cover;
  background: #d7d1c4;
  border: 1px solid rgba(62, 52, 38, 0.28);
  transition: filter 0.45s ease;
}

.archive-card:hover img {
  filter: saturate(1) contrast(1);
}

.archive-card figcaption {
  position: static;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 15px 0 0;
  color: #2a2924;
  background: none;
}

.archive-card figcaption span {
  color: var(--cinnabar);
  font-family: var(--display);
  font-size: 9px;
}

.archive-card figcaption strong {
  font-family: var(--calligraphy-cn);
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.archive-card figcaption em {
  justify-self: end;
  color: #746c5f;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.11em;
  opacity: 0.78;
}

.archive-card-01,
.archive-card-02,
.archive-card-03,
.archive-card-04,
.archive-card-05,
.archive-card-06,
.archive-card-07,
.archive-card-08,
.archive-card-09,
.archive-card-10 {
  grid-column: auto;
  grid-row: auto;
  border-radius: 0;
}

.archive-outro {
  --outro-progress: 0;
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 105vh;
  place-items: center;
  padding: 12vh 5vw;
  color: rgb(0 0 0 / var(--outro-progress));
  background: rgb(255 255 255 / var(--outro-progress));
}

.archive-outro > p {
  position: absolute;
  top: 11vh;
  left: 50%;
  margin: 0;
  font-family: var(--serif-cn);
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: var(--outro-progress);
  transform: translateX(-50%);
}

.archive-view {
  display: flex;
  width: min(74vw, 1040px);
  height: min(24vw, 300px);
  align-items: center;
  justify-content: center;
  gap: 3vw;
  color: #fff;
  background: #000;
  border-radius: 999px;
  transform: scale(var(--outro-progress));
  transform-origin: right bottom;
  will-change: transform;
}

.archive-view span {
  font-family: var(--serif-cn);
  font-size: clamp(5.5rem, 13vw, 12rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}

.archive-view small {
  align-self: flex-end;
  margin-bottom: 5.2vw;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.archive-outro-foot {
  position: absolute;
  right: 24px;
  bottom: 28px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: var(--outro-progress);
}

.reading {
  position: relative;
  z-index: 6;
}

@media (max-width: 1023px), (pointer: coarse) {
  .archive-cursor,
  .archive-hero-meta {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-right: 7vw;
    padding-left: 7vw;
  }
}

@media (max-width: 760px) {
  .archive-heading.details-heading {
    display: block;
    min-height: 96vh;
    padding: 19vh 7vw 13vh;
  }

  .archive-heading h2 {
    margin-top: 28px;
    font-size: 17vw;
  }

  .archive-heading > p:last-child {
    max-width: 86vw;
    margin-top: 38px;
    font-size: 12px;
  }

  .archive-index {
    top: 62px;
    margin: 0 14px;
    font-size: 7px;
  }

  .archive-index span:first-child {
    max-width: 48vw;
  }

  .archive-gridline {
    background-size: 50vw 50vw;
  }

  .archive-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 68px;
    padding: 12vh 11vw 20vh;
  }

  .archive-card figcaption {
    grid-template-columns: 25px minmax(0, 1fr) auto;
    padding-top: 15px;
  }

  .archive-card figcaption strong {
    font-size: 1.35rem;
  }

  .archive-card figcaption em {
    display: block;
    font-size: 7px;
  }

  .archive-outro {
    min-height: 92vh;
    padding: 12vh 16px;
  }

  .archive-outro > p {
    top: 10vh;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    letter-spacing: 0.12em;
  }

  .archive-view {
    width: calc(100vw - 32px);
    height: 118px;
    gap: 18px;
  }

  .archive-view span {
    font-size: 20vw;
  }

  .archive-view small {
    margin-bottom: 28px;
    font-size: 7px;
  }

  .archive-outro-foot {
    right: 16px;
    bottom: 22px;
    left: 16px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-view {
    transform: scale(1);
  }
}

/* The PDF stores two photographs without their intended orientation metadata. */
.source-mood .image-wrap,
.process-frame,
.stage-mobile-visual {
  container-type: size;
}

.source-mood .image-wrap {
  position: relative;
}

.source-mood .image-rotate-ccw {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.source-card:hover .image-rotate-ccw {
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.025);
}

.process-frame .process-image.image-rotate-ccw {
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(100cqh - 44px);
  height: calc(100cqw - 44px);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(0.885) scale(1.012);
}

.process-frame .process-image.image-rotate-ccw.is-visible {
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(0.885);
}

.stage-mobile-visual {
  position: relative;
}

.stage-mobile-visual .image-rotate-ccw {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100cqh - 28px);
  height: calc(100cqw - 28px);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(0.885);
}

@media (max-width: 760px) {
  .hero {
    min-height: 930px;
  }

  .hero-blue::before {
    width: 28%;
  }

  .hero-copy {
    top: 104px;
    left: 8vw;
    width: 84vw;
  }

  .hero h1 {
    font-size: clamp(3.8rem, 16vw, 4.8rem);
    line-height: 0.98;
  }

  .hero h1 span:last-child {
    margin-top: 0.08em;
    margin-left: 0.42em;
  }

  .hero-deck {
    margin-top: 22px;
  }

  .hero-intro {
    max-width: 84vw;
    margin-top: 20px;
    line-height: 1.9;
  }

  .hero-portrait {
    top: 500px;
    right: 8vw;
    width: 60vw;
  }

  .hero-seal {
    top: 432px;
    left: 9vw;
  }

  .enter-link {
    right: 8vw;
    bottom: 30px;
    left: auto;
  }

  .source-mood .image-rotate-ccw {
    object-fit: cover;
  }
}

/* Catalogue cover */
.archive-hero-meta,
.hero-blue,
.hero-ghost,
.hero-cloud,
.hero-seal,
.hero-side-note {
  display: none;
}

.hero {
  min-height: 100svh;
  color: #221f19;
  background:
    repeating-linear-gradient(92deg, transparent 0 6px, rgba(92, 71, 43, 0.025) 6.5px 7px),
    linear-gradient(105deg, #eee9df 0%, #e8e1d4 58%, #ded6c8 100%);
}

.hero::before {
  inset: 6.5vh 3.2vw;
  border-color: rgba(73, 59, 40, 0.2);
}

.hero::after {
  top: 6.5vh;
  bottom: 6.5vh;
  left: 48%;
  background: linear-gradient(
    transparent,
    rgba(87, 69, 44, 0.2) 12% 88%,
    transparent
  );
}

.hero-copy {
  top: 19vh;
  left: 7.5vw;
  z-index: 2;
  width: min(35vw, 520px);
}

.hero .eyebrow {
  margin-bottom: 24px;
  color: rgba(48, 42, 33, 0.62);
  font-size: 10px;
  letter-spacing: 0.32em;
}

.hero h1 {
  color: #1c1a16;
  font-size: clamp(5.2rem, 7.8vw, 8.8rem);
  line-height: 0.98;
  letter-spacing: 0.055em;
  text-shadow: none;
}

.hero h1 span:last-child {
  margin-top: 0.08em;
  margin-left: 0.52em;
}

.hero-deck {
  margin-top: 34px;
  color: #6b5432;
  font-size: 14px;
  letter-spacing: 0.24em;
}

.hero-deck::before {
  width: 48px;
  background: var(--cinnabar);
}

.hero-intro {
  max-width: 390px;
  margin-top: 22px;
  color: rgba(48, 42, 33, 0.64);
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.13em;
  opacity: 1;
}

.hero-portrait {
  top: 10vh;
  right: 7.5vw;
  z-index: 2;
  width: min(36vw, 520px);
}

.hero-portrait .silk-frame {
  padding: clamp(12px, 1.15vw, 18px);
  background:
    repeating-linear-gradient(92deg, transparent 0 5px, rgba(80, 60, 35, 0.025) 5.5px 6px),
    #f2ede4;
  border: 1px solid rgba(91, 72, 46, 0.34);
  box-shadow:
    24px 30px 0 rgba(116, 94, 62, 0.07),
    0 28px 70px rgba(61, 49, 33, 0.16);
}

.hero-portrait .silk-frame::before,
.hero-portrait .silk-frame::after {
  display: none;
}

.hero-portrait .silk-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 0.758;
  object-fit: cover;
}

.hero-portrait figcaption {
  margin-top: 15px;
  padding-top: 11px;
  color: rgba(48, 42, 33, 0.68);
  border-top: 1px solid rgba(91, 72, 46, 0.22);
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 1;
}

.enter-link {
  bottom: 7vh;
  left: 7.5vw;
  color: #332b20;
  font-family: var(--serif-cn);
}

.enter-link::before {
  display: none;
}

.enter-link svg {
  margin-left: 0;
}

@media (max-width: 760px) {
  .hero {
    min-height: max(100svh, 860px);
  }

  .hero::before {
    inset: 16px;
  }

  .hero::after {
    top: 16px;
    bottom: 16px;
    left: 31px;
    background: linear-gradient(
      transparent,
      rgba(87, 69, 44, 0.18) 12% 88%,
      transparent
    );
  }

  .hero-copy {
    top: 118px;
    left: 8vw;
    width: 84vw;
  }

  .hero .eyebrow {
    margin-bottom: 17px;
    font-size: 9px;
    letter-spacing: 0.24em;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 14.5vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: 0.06em;
  }

  .hero h1 span:last-child {
    margin-top: 0.04em;
    margin-left: 0.58em;
  }

  .hero-deck {
    margin-top: 21px;
    gap: 13px;
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .hero-deck::before {
    width: 30px;
  }

  .hero-intro {
    max-width: 80vw;
    margin-top: 14px;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.09em;
  }

  .hero-portrait {
    top: 450px;
    right: 8vw;
    width: min(59vw, 270px);
  }

  .hero-portrait .silk-frame {
    padding: 9px;
    box-shadow:
      13px 16px 0 rgba(116, 94, 62, 0.07),
      0 20px 44px rgba(61, 49, 33, 0.15);
  }

  .hero-portrait figcaption {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .enter-link {
    right: auto;
    bottom: 28px;
    left: 8vw;
    font-size: 10px;
  }
}