/*
 * MING LIFE editorial / independent presentation page
 * Five Admin-published Ecosystem colours are used as the only thematic tokens.
 * No legacy Ming cards or global style overrides are required.
 */
.ml-page {
  --ml-ink: var(--mtb-theme-ecosystem-primary, #1d4438);
  --ml-secondary: var(--mtb-theme-ecosystem-secondary, #566f56);
  --ml-accent: var(--mtb-theme-ecosystem-accent, #bb8e4e);
  --ml-paper: var(--mtb-theme-ecosystem-background, #fbf8f2);
  --ml-body: var(--mtb-theme-ecosystem-text, #465c50);
  --ml-line: color-mix(in srgb, var(--ml-ink) 15%, transparent);
  --ml-pale: color-mix(in srgb, var(--ml-paper) 93%, var(--ml-accent) 7%);
  --ml-sans: "Noto Sans", Arial, sans-serif;
  --ml-serif: "Noto Serif", Georgia, serif;
  background: var(--ml-paper);
  color: var(--ml-body);
  overflow: clip;
  font-family: var(--ml-sans);
}
.ml-page, .ml-page * { box-sizing: border-box; }
.ml-page h1, .ml-page h2, .ml-page h3,
.ml-page p, .ml-page figure { margin: 0; }
.ml-page a { text-decoration: none; }
.ml-page a:focus-visible, .ml-page summary:focus-visible {
  outline: 3px solid var(--ml-accent);
  outline-offset: 4px;
}
.ml-container {
  width: min(calc(100% - clamp(32px, 6vw, 100px)), 1260px);
  margin-inline: auto;
}
.ml-kicker {
  display: inline-block;
  color: var(--ml-accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 700 .73rem/1.7 var(--ml-sans);
}
/* The real MING LIFE landscape banner, never stretched to a fixed crop. */
.ml-page .ml-banner {
  width: min(calc(100% - 28px), 1760px);
  margin: 0 auto 0;
  overflow: hidden;
  border: 1px solid var(--ml-line);
  border-radius: clamp(14px, 2vw, 26px);
  background: var(--ml-pale);
  box-shadow: 0 18px 52px color-mix(in srgb, var(--ml-ink) 11%, transparent);
}
.ml-page .ml-banner__media { background: var(--ml-pale); }
.ml-page .ml-banner__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  aspect-ratio: auto;
}
/* Integrated dark banner footer: the prominent Explore CTA sits immediately
   below the full, uncropped cover, between ecosystem navigation and brand index. */
.ml-page .ml-banner__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 22px;
  min-height: 94px;
  padding: clamp(14px, 1.65vw, 22px) clamp(16px, 3vw, 36px);
  background: var(--ml-ink);
  border-top: 1px solid var(--ml-line);
}
.ml-page .ml-banner__nav > a:first-child, .ml-page .ml-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ml-paper);
  font: 600 .84rem/1.6 var(--ml-sans);
}
.ml-page .ml-banner__nav > a:first-child:hover { color: var(--ml-accent); }
.ml-page .ml-back { color: var(--ml-ink); }
.ml-page .ml-back:hover { color: var(--ml-accent); }
.ml-page .ml-banner__nav .mtb-brand-banner__meta {
  justify-self: end;
  color: var(--ml-accent);
  font: 700 .77rem/1.5 var(--ml-sans);
  letter-spacing: .15em;
}
.ml-page .ml-banner__nav .ml-banner__cta {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 21px;
  min-height: 59px;
  min-width: 255px;
  padding: 10px 12px 10px 25px;
  border: 2px solid var(--ml-accent);
  border-radius: 999px;
  color: var(--ml-ink);
  background: var(--ml-accent);
  font: 750 clamp(.9rem, 1.1vw, 1.05rem)/1.45 var(--ml-sans);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ml-ink) 38%, transparent);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.ml-page .ml-banner__nav .ml-banner__cta:hover {
  background: var(--ml-paper);
  border-color: var(--ml-paper);
  color: var(--ml-ink);
  transform: translateY(-2px);
}
.ml-page .ml-banner__cta-arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: var(--ml-paper);
  background: var(--ml-ink);
  font: 700 1.12rem/1 var(--ml-sans);
}
@media (max-width: 850px) {
  .ml-page .ml-banner__nav {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 17px 12px;
  }
  .ml-page .ml-banner__nav .mtb-brand-banner__meta { grid-column: 2; grid-row: 1; }
  .ml-page .ml-banner__nav .ml-banner__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(100%, 450px);
    justify-self: center;
  }
}
@media (max-width: 480px) {
  .ml-page .ml-banner__nav { padding: 15px 15px 17px; }
  .ml-page .ml-banner__nav .ml-banner__cta {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding-left: 19px;
  }
}
.ml-back { margin: 0 0 45px; }
/* Photo-led introduction: original branded portrait complements the heading. */
.ml-intro {
  padding: clamp(58px, 7vw, 117px) 0 clamp(66px, 8vw, 115px);
}
.ml-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .78fr);
  align-items: center;
  gap: clamp(35px, 5.4vw, 88px);
}
.ml-intro h1 {
  max-width: 19ch;
  margin: 18px 0 27px;
  color: var(--ml-ink);
  font: 450 clamp(2.45rem, 5vw, 5rem)/1.26 var(--ml-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.ml-intro__lead {
  max-width: 67ch;
  color: var(--ml-ink);
  font: 450 clamp(1.03rem, 1.3vw, 1.21rem)/1.85 var(--ml-sans);
}
.ml-intro__context {
  max-width: 70ch;
  margin-top: 20px !important;
  color: var(--ml-body);
  font: 400 1rem/1.9 var(--ml-sans);
}
/* Keep the original MING LIFE branded artwork fully visible, with no
   boxed card or cropping of its built-in identity and lettering. */
.ml-intro__artwork {
  position: relative;
  justify-self: end;
  width: min(100%, 465px);
  padding: 0 17px 17px 0;
  margin: 0;
  isolation: isolate;
}
.ml-intro__artwork::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 19px 0 0 19px;
  border: 1px solid color-mix(in srgb, var(--ml-accent) 58%, transparent);
  background: color-mix(in srgb, var(--ml-accent) 9%, var(--ml-paper));
  pointer-events: none;
}
.ml-intro__artwork img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--ml-pale);
  box-shadow: 0 25px 65px color-mix(in srgb, var(--ml-ink) 17%, transparent);
}
.ml-intro__edition {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  min-height: 390px;
  padding: 36px 15px 36px 38px;
  border-left: 1px solid var(--ml-line);
  color: var(--ml-accent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--ml-accent) 6%, transparent), transparent 72%);
}
.ml-intro__edition span {
  font: 700 .72rem/1.5 var(--ml-sans);
  letter-spacing: .14em;
}
.ml-intro__edition strong {
  color: var(--ml-ink);
  font: 450 clamp(2.3rem, 3.8vw, 4rem)/1.28 var(--ml-serif);
  letter-spacing: -.035em;
}
.ml-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 29px;
  margin-top: 33px;
}
.ml-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
  min-height: 53px;
  padding: 13px 21px;
  font: 650 .87rem/1.5 var(--ml-sans);
  transition: background-color .2s, color .2s, border-color .2s;
}
.ml-btn--primary {
  color: var(--ml-paper);
  background: var(--ml-ink);
  border: 1px solid var(--ml-ink);
}
.ml-btn--primary:hover {
  color: var(--ml-paper);
  background: var(--ml-secondary);
  border-color: var(--ml-secondary);
}
.ml-btn--text {
  color: var(--ml-ink);
  border-bottom: 1px solid var(--ml-accent);
}
.ml-btn--text:hover { color: var(--ml-accent); }
/* Unboxed editorial narrative: four large photographs with alternating stories. */
.ml-stories__heading {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 7px;
}
.ml-stories__rule { flex: 1; height: 1px; background: var(--ml-line); }
.ml-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(42px, 7vw, 114px);
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(54px, 7vw, 120px) clamp(24px, 6vw, 88px);
  border-bottom: 1px solid var(--ml-line);
  scroll-margin-top: 90px;
}
.ml-story--reverse .ml-story__visual { order: 2; }
.ml-story--reverse .ml-story__body { order: 1; }
.ml-story__visual { display: grid; place-items: center; min-width: 0; }
/* Four original 1672x941 photo scenes form the core of each editorial
   spread. Preserve their 16:9 composition; never crop packaging or faces. */
.ml-story__photo {
  display: block;
  width: 100%;
  max-width: 665px;
  margin: 0;
}
.ml-story__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  object-position: center;
  border-radius: clamp(10px, 1.2vw, 17px);
  background: var(--ml-pale);
  box-shadow: 0 19px 43px color-mix(in srgb, var(--ml-ink) 12%, transparent);
}
.ml-story__photo figcaption {
  max-width: 73ch;
  margin-top: 13px;
  padding-left: 16px;
  border-left: 2px solid var(--ml-accent);
  color: var(--ml-secondary);
  font: 400 .76rem/1.7 var(--ml-sans);
}
.ml-story__image-missing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 1672 / 941;
  padding: clamp(24px, 4vw, 45px);
  color: var(--ml-paper);
  background: var(--ml-ink);
}
.ml-story__image-missing span {
  font: 700 .72rem/1.5 var(--ml-sans);
  letter-spacing: .16em;
}
.ml-story__image-missing strong {
  align-self: end;
  font: 400 clamp(4rem, 11vw, 10rem)/.9 var(--ml-serif);
  color: var(--ml-accent);
}
.ml-story__body .ml-kicker { margin-bottom: 17px; }
.ml-story__body h2 {
  max-width: 21ch;
  color: var(--ml-ink);
  font: 450 clamp(2rem, 3.5vw, 3.55rem)/1.3 var(--ml-serif);
  text-wrap: balance;
  letter-spacing: -.035em;
}
.ml-story__body > p {
  max-width: 54ch;
  margin-top: 22px;
  font: 400 clamp(.99rem, 1.15vw, 1.08rem)/1.93 var(--ml-sans);
  color: var(--ml-body);
}
.ml-story__body .ml-story__aside {
  max-width: 44ch;
  padding-top: 18px;
  border-top: 1px solid var(--ml-line);
  color: var(--ml-secondary);
  font-size: .87rem;
}
.ml-story__discover {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  margin-top: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ml-accent);
  color: var(--ml-ink);
  font: 700 .85rem/1.6 var(--ml-sans);
}
.ml-story__discover:hover { color: var(--ml-accent); }
/* Detailed brief: restrained native disclosure rows instead of cards. */
.ml-dossier {
  padding: clamp(76px, 9vw, 132px) 0;
  background: var(--ml-pale);
  scroll-margin-top: 84px;
}
.ml-dossier__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 35px 90px;
  align-items: end;
  margin-bottom: clamp(38px, 6vw, 73px);
}
.ml-dossier__intro h2 {
  max-width: 21ch;
  margin-top: 17px;
  font: 450 clamp(2.1rem, 3.45vw, 3.8rem)/1.25 var(--ml-serif);
  color: var(--ml-ink);
  letter-spacing: -.035em;
}
.ml-dossier__intro p {
  max-width: 57ch;
  font: 400 1rem/1.9 var(--ml-sans);
}
.ml-dossier__items { border-top: 1px solid var(--ml-line); }
.ml-dossier__chapter { border-bottom: 1px solid var(--ml-line); scroll-margin-top: 88px; }
.ml-dossier__chapter summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  gap: 20px;
  align-items: center;
  min-height: 95px;
  padding: 23px 0;
  cursor: pointer;
  list-style: none;
  color: var(--ml-ink);
}
.ml-dossier__chapter summary::-webkit-details-marker { display: none; }
.ml-dossier__number {
  color: var(--ml-accent);
  font: 700 .79rem/1.6 var(--ml-sans);
}
.ml-dossier__name {
  font: 450 clamp(1.2rem, 2vw, 1.95rem)/1.46 var(--ml-serif);
}
.ml-dossier__plus {
  font: 300 1.7rem/1 var(--ml-sans);
  text-align: right;
  color: var(--ml-secondary);
}
.ml-dossier__chapter[open] .ml-dossier__plus { transform: rotate(45deg); }
.ml-dossier__body {
  max-width: 88ch;
  padding: 0 30px 35px 72px;
  color: var(--ml-body);
  font: 400 .98rem/1.93 var(--ml-sans);
}
.ml-dossier__body h3 {
  margin: 24px 0 10px;
  color: var(--ml-ink);
  font: 700 1.01rem/1.65 var(--ml-sans);
}
.ml-dossier__body > p { margin-bottom: 14px; }
.ml-dossier__body ul {
  margin: 10px 0 22px;
  padding-left: 20px;
}
.ml-dossier__body li { padding: 5px 0; }
/* Final off-site destination is deliberately unmistakable. */
.ml-invitation {
  padding: clamp(75px, 8vw, 116px) 0;
}
.ml-invitation__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 35px 70px;
  align-items: center;
}
.ml-invitation h2 {
  max-width: 20ch;
  margin: 17px 0;
  color: var(--ml-ink);
  font: 450 clamp(1.95rem, 3vw, 3.3rem)/1.35 var(--ml-serif);
}
.ml-invitation p { max-width: 64ch; line-height: 1.88; }
.ml-notice {
  padding: 19px 0;
  background: var(--ml-pale);
  border-block: 1px solid var(--ml-line);
}
.ml-notice p {
  max-width: 115ch;
  color: var(--ml-body);
  font: 400 .86rem/1.78 var(--ml-sans);
}
.ml-ecosystem { padding: 49px 0 73px; }
.ml-ecosystem__head {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
}
.ml-ecosystem__head a { color: var(--ml-secondary); font: 600 .84rem/1.6 var(--ml-sans); }
.ml-ecosystem__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding-top: 24px;
  border-top: 1px solid var(--ml-line);
}
.ml-ecosystem__links a {
  color: var(--ml-secondary);
  font: 650 .76rem/1.65 var(--ml-sans);
  letter-spacing: .06em;
}
.ml-ecosystem__links a:hover,
.ml-ecosystem__links a[aria-current="page"] { color: var(--ml-ink); }
.ml-ecosystem__links a span { color: var(--ml-accent); }
@media (max-width: 950px) {
  .ml-intro__grid { grid-template-columns: minmax(0, 1.18fr) minmax(245px, .82fr); gap: 34px; }
  .ml-intro__edition { padding-left: 20px; }
  .ml-intro__edition strong { font-size: 2.6rem; }
  .ml-story { gap: 37px; padding-inline: 30px; }
  .ml-invitation__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ml-page .ml-banner { width: calc(100% - 12px); border-radius: 13px; }
  .ml-page .ml-banner__nav { min-height: 52px; padding: 11px 15px; }
  .ml-intro { padding: 52px 0 60px; }
  .ml-intro__grid { display: block; }
  .ml-intro h1 { font-size: clamp(2.15rem, 7.8vw, 3.7rem); }
  .ml-intro__artwork {
    width: min(100%, 410px);
    margin: 42px auto 0;
    padding-right: 13px;
    padding-bottom: 13px;
  }
  .ml-intro__artwork::after { inset: 16px 0 0 16px; }
  .ml-intro__edition { display: none; }
  .ml-story, .ml-story--reverse {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 54px 22px;
  }
  .ml-story--reverse .ml-story__visual,
  .ml-story--reverse .ml-story__body { order: initial; }
  .ml-story__visual { justify-content: start; }
  .ml-story__photo { width: 100%; max-width: none; }
  .ml-story__photo img { border-radius: 12px; }
  .ml-story__body h2 { max-width: 24ch; font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .ml-dossier__intro { grid-template-columns: 1fr; gap: 18px; }
  .ml-dossier__body { padding: 0 0 30px 20px; }
}
@media (max-width: 460px) {
  .ml-container { width: calc(100% - 32px); }
  .ml-intro h1 { font-size: clamp(2.05rem, 9.3vw, 2.8rem); }
  .ml-intro__actions { align-items: stretch; gap: 12px; }
  .ml-btn { width: 100%; }
  .ml-story { padding: 41px 17px; }
  .ml-story__photo figcaption { padding-left: 11px; font-size: .73rem; }
  .ml-dossier__chapter summary { grid-template-columns: 28px minmax(0, 1fr) 22px; gap: 10px; padding: 20px 0; }
  .ml-dossier__name { font-size: 1.16rem; }
  .ml-dossier__body { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-page *, .ml-page *::before, .ml-page *::after { transition: none !important; }
}