/* MILOU final handoff layer.
   This file intentionally overrides the older prototype stack in styles.css. */

:root {
  --milou-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --milou-ink: #1d1418;
  --milou-soft-ink: rgba(29, 20, 24, 0.66);
  --milou-faint-ink: rgba(29, 20, 24, 0.38);
  --milou-paper: #f7f6f4;
  --milou-white: #fffdfb;
  --milou-pink: #f16ca9;
  --milou-pink-soft: rgba(241, 108, 169, 0.18);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--milou-font) !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--milou-ink) !important;
  background: var(--milou-paper) !important;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.site-bg,
#shareBtn {
  display: none !important;
}

.museum-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  min-height: calc(74px + env(safe-area-inset-top)) !important;
  padding: calc(12px + env(safe-area-inset-top)) clamp(20px, 4vw, 72px) 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 48px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(247, 246, 244, 0.74) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  box-shadow: 0 1px 0 rgba(29, 20, 24, 0.06), 0 18px 42px rgba(29, 20, 24, 0.06) !important;
}

.museum-bar::before,
.museum-bar::after {
  display: none !important;
}

.museum-bar .brand,
.museum-bar .brand span,
.museum-bar .top-nav a,
.museum-bar .language-toggle {
  color: rgba(29, 20, 24, 0.92) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.museum-bar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: clamp(21px, 2vw, 28px) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.museum-bar .brand-mark {
  width: auto !important;
  height: auto !important;
  display: inline !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: 780 !important;
}

.museum-bar .top-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(10px, 2vw, 36px) !important;
}

.museum-bar .top-nav a {
  min-height: 38px !important;
  padding: 9px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.museum-bar .top-nav a[aria-current="page"],
.museum-bar .top-nav a:hover {
  background: rgba(255, 255, 255, 0.68) !important;
}

.museum-bar .language-toggle {
  min-width: 54px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(29, 20, 24, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

main#top {
  background: var(--milou-paper) !important;
}

.hero-section.hero-entry {
  position: relative !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: calc(104px + env(safe-area-inset-top)) clamp(24px, 6vw, 92px) clamp(38px, 5vw, 72px) !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--milou-ink) !important;
  background:
    radial-gradient(ellipse at 24% 22%, rgba(255, 196, 220, 0.52) 0 9%, transparent 28%),
    radial-gradient(ellipse at 72% 60%, rgba(245, 53, 148, 0.64) 0 16%, transparent 42%),
    radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.94) 0 13%, transparent 34%),
    linear-gradient(180deg, #f1f1f0 0%, #faf9f7 58%, #eeeeec 100%) !important;
}

.hero-section.hero-entry::before {
  position: absolute !important;
  inset: -16% -12% !important;
  z-index: -2 !important;
  content: "" !important;
  background:
    radial-gradient(circle at 19% 20%, rgba(255, 125, 180, 0.38), transparent 24%),
    radial-gradient(circle at 71% 56%, rgba(255, 37, 142, 0.54), transparent 36%),
    radial-gradient(circle at 43% 63%, rgba(255, 255, 255, 0.92), transparent 25%),
    radial-gradient(circle at 88% 32%, rgba(255, 192, 214, 0.3), transparent 24%) !important;
  filter: blur(58px) !important;
  opacity: 0.92 !important;
  animation: milouFieldDrift 14s ease-in-out infinite alternate !important;
}

.hero-section.hero-entry::after {
  position: absolute !important;
  inset: calc(104px + env(safe-area-inset-top)) clamp(24px, 6vw, 92px) clamp(38px, 5vw, 72px) !important;
  z-index: -1 !important;
  content: "" !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  background:
    linear-gradient(to right, transparent 0 49.8%, rgba(255, 255, 255, 0.64) 49.8% 50%, transparent 50%),
    linear-gradient(to bottom, transparent 0 43%, rgba(255, 255, 255, 0.64) 43% 43.25%, transparent 43.25%),
    linear-gradient(to bottom, transparent 0 75%, rgba(255, 255, 255, 0.58) 75% 75.2%, transparent 75.2%) !important;
  opacity: 0.74 !important;
}

.hero-section.hero-entry .hero-feature,
.hero-section.hero-entry .hero-poster-fragment,
.hero-section.hero-entry .hero-scroll-cue {
  display: none !important;
}

.hero-copy-block {
  position: relative !important;
  width: 100% !important;
  min-height: calc(100svh - 178px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: auto minmax(130px, 1fr) auto auto !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  align-items: start !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-section.hero-entry .hero-copy-block::before,
.hero-section.hero-entry .hero-copy-block::after {
  display: none !important;
  content: none !important;
}

.hero-copy-block .section-label {
  grid-column: 1 / 5 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  color: rgba(29, 20, 24, 0.62) !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  font-weight: 780 !important;
  letter-spacing: 0.1em !important;
}

.hero-entry h1 {
  grid-column: 1 / 7 !important;
  grid-row: 2 !important;
  align-self: center !important;
  max-width: 5em !important;
  margin: 0 !important;
  color: #0d0c0d !important;
  font-size: clamp(70px, 10vw, 168px) !important;
  font-weight: 760 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
}

.hero-entry .hero-english {
  grid-column: 7 / 13 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: stretch !important;
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(12, 11, 12, 0.94) !important;
  font-size: clamp(34px, 5.4vw, 88px) !important;
  font-weight: 720 !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.hero-entry .hero-copy-lead {
  grid-column: 1 / 6 !important;
  grid-row: 3 !important;
  max-width: 560px !important;
  margin: 0 !important;
  color: rgba(29, 20, 24, 0.72) !important;
  font-size: clamp(16px, 1.5vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.hero-entry .hero-actions {
  grid-column: 1 / 13 !important;
  grid-row: 4 !important;
  width: 100% !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, 0.58fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  margin: clamp(18px, 3vw, 32px) 0 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
}

.hero-entry .hero-actions::after {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 18px clamp(18px, 2.5vw, 34px) !important;
  content: "2026.4.21-6.14" !important;
  color: rgba(12, 11, 12, 0.86) !important;
  font-size: clamp(18px, 1.8vw, 28px) !important;
  font-weight: 520 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.62) !important;
}

.hero-entry .primary-link,
.hero-entry .secondary-link {
  min-height: 112px !important;
  padding: 20px clamp(20px, 3vw, 42px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(12, 11, 12, 0.92) !important;
  box-shadow: none !important;
  font-size: clamp(17px, 1.35vw, 23px) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.hero-entry .primary-link:hover,
.hero-entry .secondary-link:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: none !important;
}

.exhibition-strip,
.guide-runway,
.intro-panel,
.student-intro-section,
.theme-rail,
.charity-trust-section,
.home-collections,
.claim-section,
.qr-section,
.contact-section,
.maker-credit {
  background: var(--milou-white) !important;
}

.exhibition-strip,
.guide-runway,
.theme-rail,
.claim-section,
.qr-section,
.contact-section {
  padding-left: clamp(22px, 5vw, 74px) !important;
  padding-right: clamp(22px, 5vw, 74px) !important;
}

.section-heading,
.guide-header,
.claim-header,
.qr-header,
.contact-header {
  text-align: left !important;
}

.collections-section {
  padding: clamp(72px, 9vw, 132px) clamp(22px, 5vw, 74px) !important;
  background: var(--milou-white) !important;
  text-align: left !important;
}

.collections-section .section-heading {
  display: block !important;
  max-width: 1180px !important;
  margin: 0 0 clamp(30px, 5vw, 64px) !important;
  text-align: left !important;
}

.collections-section .section-heading .section-label {
  margin-bottom: 20px !important;
  color: var(--milou-faint-ink) !important;
}

.collections-section .section-heading h2 {
  max-width: 980px !important;
  margin: 0 !important;
  color: var(--milou-ink) !important;
  font-size: clamp(48px, 7vw, 112px) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.collection-list.is-logo-wall {
  border: 0 !important;
  border-top: 1px solid rgba(29, 20, 24, 0.1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.collection-list.is-logo-wall .collection-card {
  border-color: rgba(29, 20, 24, 0.08) !important;
  background: transparent !important;
}

.maker-credit {
  padding: 24px 22px 38px !important;
  color: rgba(29, 20, 24, 0.42) !important;
  font-size: 12px !important;
  text-align: center !important;
}

.maker-credit a {
  color: rgba(29, 20, 24, 0.48) !important;
  text-decoration: none !important;
}

.collection-page-main {
  padding-top: calc(74px + env(safe-area-inset-top)) !important;
  background: var(--milou-white) !important;
}

.collection-page-hero {
  min-height: 0 !important;
  padding: clamp(34px, 5vw, 58px) clamp(22px, 5vw, 70px) clamp(10px, 2vw, 26px) !important;
  display: block !important;
  background: var(--milou-white) !important;
  text-align: left !important;
}

.collection-page-hero .section-label {
  margin: 0 0 12px !important;
  color: var(--milou-faint-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
}

.collection-page-hero h1 {
  max-width: 900px !important;
  margin: 0 0 14px !important;
  color: var(--milou-ink) !important;
  font-size: clamp(44px, 7.4vw, 94px) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.collection-page-hero p:not(.section-label) {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--milou-soft-ink) !important;
  font-size: clamp(16px, 1.6vw, 23px) !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.collection-page-actions,
.collection-page-hero #collectionPageCount {
  display: none !important;
}

.single-work-viewer {
  position: relative !important;
  min-height: calc(100svh - 190px) !important;
  padding: clamp(18px, 3vw, 42px) clamp(22px, 5vw, 70px) clamp(42px, 6vw, 88px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--milou-white) !important;
}

.collection-page-detail {
  width: min(100%, 1320px) !important;
  min-height: clamp(560px, 68svh, 760px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.78fr) !important;
  gap: clamp(34px, 5vw, 78px) !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.single-work-image {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.single-work-image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: min(68svh, 720px) !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 26px 70px rgba(29, 20, 24, 0.08) !important;
}

.single-work-copy {
  max-width: 520px !important;
  padding: 0 !important;
  color: var(--milou-ink) !important;
  text-align: left !important;
}

.single-work-copy .section-label {
  margin: 0 0 10px !important;
  color: var(--milou-faint-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.single-work-copy h2 {
  margin: 0 0 14px !important;
  color: var(--milou-ink) !important;
  font-size: clamp(40px, 5vw, 78px) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.single-work-spec {
  margin: 0 0 28px !important;
  color: var(--milou-soft-ink) !important;
  font-size: clamp(16px, 1.5vw, 22px) !important;
  line-height: 1.55 !important;
}

.single-work-copy dl {
  margin: 0 0 28px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 28px !important;
}

.single-work-copy dt {
  color: var(--milou-faint-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.single-work-copy dd {
  margin: 4px 0 0 !important;
  color: var(--milou-soft-ink) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.single-work-copy article {
  margin: 0 0 22px !important;
}

.single-work-copy article h3 {
  margin: 0 0 8px !important;
  color: var(--milou-ink) !important;
  font-size: 17px !important;
  font-weight: 760 !important;
}

.single-work-copy article p {
  margin: 0 !important;
  color: var(--milou-soft-ink) !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
}

.single-work-control {
  position: fixed !important;
  top: 50% !important;
  z-index: 75 !important;
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(29, 20, 24, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--milou-ink) !important;
  box-shadow: 0 18px 42px rgba(29, 20, 24, 0.08) !important;
  transform: translateY(-50%) !important;
}

.single-work-control.is-prev {
  left: clamp(16px, 3vw, 48px) !important;
}

.single-work-control.is-next {
  right: clamp(16px, 3vw, 48px) !important;
}

.single-thumb-strip {
  padding: 0 clamp(22px, 5vw, 70px) 46px !important;
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  background: var(--milou-white) !important;
}

.single-thumb {
  width: 86px !important;
  min-width: 86px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0.42 !important;
}

.single-thumb.is-active {
  opacity: 1 !important;
}

.single-thumb img {
  width: 86px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

.single-thumb span {
  display: block !important;
  margin-top: 6px !important;
  color: var(--milou-faint-ink) !important;
  font-size: 11px !important;
}

.collection-page-body[data-collection="student"] .collection-page-detail {
  grid-template-columns: 1fr !important;
  width: min(100%, 900px) !important;
}

.student-immersive-work {
  width: 100% !important;
  display: grid !important;
  gap: 22px !important;
  justify-items: center !important;
  text-align: center !important;
}

.student-swipe-hint {
  margin: 0 !important;
  color: var(--milou-faint-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.student-frame-stage {
  width: min(100%, 760px) !important;
  display: flex !important;
  justify-content: center !important;
  perspective: 1100px !important;
}

.student-touch-frame {
  position: relative !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0) !important;
  transform-style: preserve-3d !important;
  transition: transform 180ms ease, filter 180ms ease !important;
  cursor: pointer !important;
}

.student-touch-frame::after {
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: var(--glare, 0) !important;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.5), transparent 36%) !important;
  mix-blend-mode: screen !important;
  transition: opacity 180ms ease !important;
}

.student-touch-frame img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: min(66svh, 680px) !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 26px 70px rgba(29, 20, 24, 0.08) !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* 栅格子项防溢出：父级 display:grid + justify-items:center 时，子项会按
   max-content 撑开、在窄屏溢出栅格列（之前 caption/按钮在 ≤390px 被右切）。
   min-width:0 + max-width:100% 让子项被约束在容器内、按钮在容器内换行。 */
.student-immersive-work > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.student-immersive-caption {
  width: 100% !important;
  max-width: min(640px, 100%) !important;
  color: var(--milou-ink) !important;
}

.student-immersive-caption p,
.student-immersive-caption span {
  margin: 0 !important;
  color: var(--milou-soft-ink) !important;
  font-size: 15px !important;
}

.student-immersive-caption h2 {
  margin: 8px 0 8px !important;
  font-size: clamp(30px, 5vw, 58px) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
}

.student-immersive-actions {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.student-immersive-actions button,
.student-share-primary,
.student-share-secondary {
  min-height: 46px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(29, 20, 24, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--milou-ink) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  box-shadow: 0 12px 28px rgba(29, 20, 24, 0.06) !important;
}

.student-immersive-actions button[data-share-poster],
.student-share-primary {
  background: var(--milou-ink) !important;
  color: #fff !important;
}

.share-poster-overlay,
.student-story-overlay {
  background: rgba(17, 12, 14, 0.42) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

@keyframes milouFieldDrift {
  0% {
    transform: translate3d(-1.4%, -1%, 0) scale(1);
  }

  100% {
    transform: translate3d(1.6%, 1%, 0) scale(1.04);
  }
}

@media (max-width: 820px) {
  .museum-bar {
    min-height: calc(68px + env(safe-area-inset-top)) !important;
    padding: calc(10px + env(safe-area-inset-top)) 18px 10px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    background: rgba(247, 246, 244, 0.82) !important;
  }

  .museum-bar .top-nav {
    display: none !important;
  }

  .museum-bar .brand {
    font-size: 24px !important;
  }

  .museum-bar .language-toggle {
    min-width: 50px !important;
    min-height: 40px !important;
  }

  .hero-section.hero-entry {
    min-height: 100svh !important;
    padding: calc(96px + env(safe-area-inset-top)) 20px 28px !important;
  }

  .hero-section.hero-entry::after {
    inset: calc(92px + env(safe-area-inset-top)) 20px 28px !important;
    background:
      linear-gradient(to bottom, transparent 0 43%, rgba(255, 255, 255, 0.62) 43% 43.2%, transparent 43.2%),
      linear-gradient(to bottom, transparent 0 75%, rgba(255, 255, 255, 0.58) 75% 75.2%, transparent 75.2%) !important;
  }

  .hero-copy-block {
    min-height: calc(100svh - 120px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(120px, 1fr) auto auto !important;
    gap: 18px !important;
  }

  .hero-copy-block .section-label {
    margin: 0 0 22px !important;
    font-size: 12px !important;
  }

  .hero-entry h1 {
    max-width: 5em !important;
    margin: 0 0 22px !important;
    font-size: clamp(58px, 17vw, 86px) !important;
    line-height: 0.98 !important;
  }

  .hero-entry .hero-english {
    max-width: 96vw !important;
    margin: 0 0 26px !important;
    font-size: clamp(22px, 7.6vw, 34px) !important;
    line-height: 1.02 !important;
  }

  .hero-entry .hero-copy-lead {
    max-width: 92vw !important;
    margin: 0 0 22px !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  .hero-entry .hero-actions {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }

  .hero-entry .hero-actions::after {
    min-height: 56px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.62) !important;
    font-size: 17px !important;
  }

  .hero-entry .primary-link,
  .hero-entry .secondary-link {
    min-height: 64px !important;
    padding: 18px 20px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.62) !important;
    font-size: 17px !important;
  }

  .collections-section {
    padding: 72px 22px !important;
  }

  .collections-section .section-heading h2 {
    font-size: clamp(40px, 12vw, 66px) !important;
  }

  .collection-page-main {
    padding-top: calc(68px + env(safe-area-inset-top)) !important;
  }

  .collection-page-hero {
    padding: 28px 22px 4px !important;
  }

  .collection-page-hero h1 {
    font-size: clamp(34px, 10vw, 52px) !important;
  }

  .single-work-viewer {
    min-height: calc(100svh - 168px) !important;
    padding: 16px 20px 34px !important;
    align-items: start !important;
  }

  .collection-page-detail {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .single-work-image img,
  .student-touch-frame img {
    max-height: 55svh !important;
  }

  .single-work-copy h2 {
    font-size: clamp(34px, 11vw, 52px) !important;
  }

  .single-work-copy dl {
    grid-template-columns: 1fr 1fr !important;
  }

  .single-work-control {
    top: calc(68px + env(safe-area-inset-top) + 39svh) !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 14px 34px rgba(29, 20, 24, 0.08) !important;
    transform: translateY(-50%) !important;
  }

  .single-work-control.is-prev {
    left: 18px !important;
  }

  .single-work-control.is-next {
    right: 18px !important;
  }

  .single-thumb-strip {
    padding: 0 20px 34px !important;
  }

  .student-immersive-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .student-immersive-actions button {
    width: 100% !important;
  }
}

/* Final handoff seal: keep the last exported package from falling back into
   older card/glass experiments still present in styles.css. */
body .museum-bar .brand > span:last-child {
  color: rgba(29, 20, 24, 0.88) !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block {
  width: 100% !important;
  min-height: calc(100svh - 178px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: auto minmax(130px, 1fr) auto auto !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block .section-label {
  grid-column: 1 / 5 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 !important;
  color: rgba(29, 20, 24, 0.62) !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block h1 {
  grid-column: 1 / 7 !important;
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 !important;
  color: #0d0c0d !important;
  text-align: left !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block .hero-english {
  grid-column: 7 / 13 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  color: rgba(12, 11, 12, 0.92) !important;
  text-align: left !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block .hero-copy-lead {
  grid-column: 1 / 6 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  color: rgba(29, 20, 24, 0.72) !important;
  text-align: left !important;
}

body main#top .hero-section.hero-entry > .hero-copy-block .hero-actions {
  grid-column: 1 / 13 !important;
  grid-row: 4 !important;
  margin: clamp(18px, 3vw, 32px) 0 0 !important;
}

@media (max-width: 820px) {
  body main#top .hero-section.hero-entry > .hero-copy-block {
    min-height: calc(100svh - 124px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    gap: 18px !important;
  }

  body main#top .hero-section.hero-entry > .hero-copy-block .section-label,
  body main#top .hero-section.hero-entry > .hero-copy-block h1,
  body main#top .hero-section.hero-entry > .hero-copy-block .hero-english,
  body main#top .hero-section.hero-entry > .hero-copy-block .hero-copy-lead,
  body main#top .hero-section.hero-entry > .hero-copy-block .hero-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body main#top .hero-section.hero-entry > .hero-copy-block h1 {
    max-width: 5em !important;
    font-size: clamp(58px, 17vw, 86px) !important;
  }

  body main#top .hero-section.hero-entry > .hero-copy-block .hero-english {
    max-width: 100% !important;
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.05 !important;
  }

  body main#top .hero-section.hero-entry > .hero-copy-block .hero-copy-lead {
    max-width: 100% !important;
    font-size: 16px !important;
  }
}

/* ===== 信息修正 / 反馈页 + 首页反馈入口（接入新版视觉） ===== */
.claim-feedback-note {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--milou-soft-ink);
}

.claim-feedback-note a {
  color: var(--milou-pink);
  text-decoration: none;
  border-bottom: 1px solid var(--milou-pink-soft);
  padding-bottom: 1px;
}

.claim-feedback-note a:hover {
  border-bottom-color: var(--milou-pink);
}

/* 反馈页主体：在新版顶栏下做成居中单列，避免套用作品页的浏览网格 */
.feedback-page .collection-page-main.feedback-main {
  display: block !important;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(84px, 12vh, 132px) clamp(20px, 5vw, 40px) clamp(56px, 9vh, 110px);
}

.feedback-page .feedback-hero {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.feedback-page .success-main {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 96px);
}

.feedback-success-panel {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 54px);
  text-align: center;
}

.feedback-success-panel h1 {
  margin: 10px 0 14px;
}

.feedback-success-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 30px);
}