/* ============================================================================
   MAXIVO — Content pages: About, Size guide, Lookbook (dark)
   ============================================================================ */

/* ---------- ABOUT ---------- */
.mx-about-intro { padding: 104px var(--mx-pad-x) 76px; max-width: 1100px; }
.mx-about-intro h1 { margin: 22px 0 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(38px,5.6vw,86px); line-height: .94; letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }

.mx-about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mx-line); border-top: 1px solid var(--mx-line); }
.mx-about-copy { background: var(--mx-bg); padding: 64px 56px; display: flex; flex-direction: column; gap: 20px; }
.mx-about-copy p { margin: 0; }
.mx-about-copy p:first-child { font-size: 17px; line-height: 1.65; color: #242320; }
.mx-about-copy p + p { font-size: 15px; line-height: 1.7; color: var(--mx-mut); }
.mx-about-media { background: var(--mx-plc); display: grid; place-items: center; min-height: 520px; }

.mx-stats { background: var(--mx-ink); color: var(--mx-cream); padding: 76px var(--mx-pad-x); display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.mx-stat { display: flex; flex-direction: column; gap: 10px; }
.mx-stat b { font-family: var(--mx-display); font-weight: 800; font-size: clamp(34px,4vw,58px); letter-spacing: -.03em; }
.mx-stat span { font: 400 10px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mx-on-dark-mut); }

.mx-how { padding: 76px var(--mx-pad-x); display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.mx-how > h2 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(26px,3vw,40px); line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
.mx-how-row { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--mx-line); }
.mx-how-row:last-child { border-bottom: 1px solid var(--mx-line); }
.mx-how-row .n { font: 400 11px var(--mx-mono); letter-spacing: .14em; color: #8B8985; }
.mx-how-row h3 { margin: 0; font-family: var(--mx-display); font-weight: 700; font-size: 19px; letter-spacing: -.015em; }
.mx-how-row p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--mx-mut); max-width: 62ch; }

.mx-gallery-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mx-line); border-top: 1px solid var(--mx-line); }
.mx-gallery-3 .mx-plc { aspect-ratio: 1; }

/* ---------- SIZE GUIDE ---------- */
.mx-size-intro { padding: 56px var(--mx-pad-x) 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--mx-line); flex-wrap: wrap; }
.mx-size-intro h1 { margin: 16px 0 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(34px,4.6vw,64px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.mx-size-intro p { margin: 16px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.65; color: var(--mx-mut); }
.mx-toggle { display: flex; gap: 6px; font: 400 11px var(--mx-mono); letter-spacing: .1em; text-transform: uppercase; }
.mx-toggle .on { background: var(--mx-ink); color: var(--mx-cream); padding: 9px 15px; }
.mx-toggle .off { border: 1px solid var(--mx-line-3); padding: 9px 15px; }

.mx-size-sec { padding: 44px var(--mx-pad-x) 20px; }
.mx-size-sec h2 { margin: 0 0 18px; font-family: var(--mx-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; }
.mx-size-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mx-size-table thead tr { border-top: 1px solid var(--mx-ink); border-bottom: 1px solid var(--mx-ink); }
.mx-size-table th { text-align: left; padding: 13px 12px; font: 400 10px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mx-mut); }
.mx-size-table th:first-child, .mx-size-table td:first-child { padding-left: 0; }
.mx-size-table tbody { font-family: var(--mx-mono); font-size: 13px; }
.mx-size-table td { padding: 13px 12px; border-bottom: 1px solid var(--mx-line); }
.mx-size-table td.k { font-family: var(--mx-body); font-weight: 500; font-size: 14px; }
.mx-size-table tr.hi { background: var(--mx-panel); }

.mx-measure { padding: 52px var(--mx-pad-x) 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; border-top: 1px solid var(--mx-line); margin-top: 40px; }
.mx-measure h2 { margin: 0; font-family: var(--mx-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; }
.mx-measure-list { display: flex; flex-direction: column; gap: 16px; }
.mx-measure-row { display: grid; grid-template-columns: 56px 1fr; gap: 20px; }
.mx-measure-row span { font: 400 11px var(--mx-mono); letter-spacing: .14em; color: #8B8985; }
.mx-measure-row p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mx-mut); }
.mx-darkbox { background: var(--mx-ink); color: var(--mx-cream); padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.mx-darkbox .mx-eyebrow { color: var(--mx-accent); }
.mx-darkbox p { margin: 0; font-size: 14px; line-height: 1.6; color: #C6C3BF; }
.mx-measure-diagram { background: var(--mx-plc); min-height: 460px; display: grid; place-items: center; }

/* ---------- LOOKBOOK (dark) ---------- */
.mx-lb-hero { padding: 96px var(--mx-pad-x) 72px; display: grid; grid-template-columns: 1fr .7fr; gap: 56px; align-items: end; border-bottom: 1px solid var(--mx-line-dark); }
.mx-lb-hero h1 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(48px,8vw,140px); line-height: .84; letter-spacing: -.045em; text-transform: uppercase; }
.mx-lb-hero .mx-eyebrow { color: var(--mx-accent); }
.mx-lb-hero p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--mx-on-dark); }
.mx-lb-hero > div { display: flex; flex-direction: column; gap: 16px; padding-bottom: 14px; }

.mx-lb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mx-line-dark); }
.mx-lb-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mx-line-dark); }
.mx-lb-fig { margin: 0; background: var(--mx-ink); }
.mx-lb-fig .mx-plc--dark { aspect-ratio: 4/5; }
.mx-lb-grid3 .mx-lb-fig .mx-plc--dark { aspect-ratio: 3/4; }
.mx-lb-fig figcaption { padding: 18px 22px 26px; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--mx-on-dark); }
.mx-lb-grid3 .mx-lb-fig figcaption { padding: 16px 20px 24px; display: block; }

.mx-lb-band .mx-plc--dark { aspect-ratio: 21/9; border-top: 1px solid var(--mx-line-dark); }
.mx-lb-credits { padding: 44px var(--mx-pad-x); display: grid; grid-template-columns: 1fr .8fr; gap: 56px; border-bottom: 1px solid var(--mx-line-dark); }
.mx-lb-credits p { margin: 0; font-family: var(--mx-display); font-weight: 700; font-size: clamp(22px,2.6vw,38px); line-height: 1.12; letter-spacing: -.025em; max-width: 34ch; }
.mx-lb-credits .credits { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--mx-on-dark-mut); padding-top: 6px; }
.mx-lb-cta { padding: 72px var(--mx-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid var(--mx-line-dark); }
.mx-lb-cta h2 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(26px,3.2vw,44px); letter-spacing: -.03em; text-transform: uppercase; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .mx-about-split { grid-template-columns: 1fr; }
  .mx-stats { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .mx-how { grid-template-columns: 1fr; gap: 24px; }
  .mx-measure { grid-template-columns: 1fr; }
  .mx-lb-hero { grid-template-columns: 1fr; gap: 24px; }
  .mx-lb-grid2, .mx-lb-grid3 { grid-template-columns: 1fr; }
  .mx-lb-credits { grid-template-columns: 1fr; gap: 24px; }
  .mx-lb-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .mx-stats { grid-template-columns: 1fr 1fr; }
  .mx-gallery-3 { grid-template-columns: 1fr; }
  .mx-size-table { font-size: 12px; }
  .mx-size-table th, .mx-size-table td { padding: 10px 6px; }
  .mx-about-copy { padding: 40px 24px; }
}