/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — MEDIA BLOCKS (2026-09 media update)
   Film reels, photo mosaics, before & after rows and feature films, placed
   by _tx-build/add_media.py on the treatment, work and home pages.
   Self-contained: every rule is scoped to .mx, with its own tokens, so it
   sits on body.tx pages, the homepage and contact alike without leaning on
   (or disturbing) treatment.css, home.css or site.css.
   Motion lives in media.js; without it every photo still shows and every
   film keeps its poster and native controls.
   ══════════════════════════════════════════════════════════════════════════ */

.mx {
  --mx-ivory: #f6f1e9;
  --mx-cream: #eee6d9;
  --mx-esp: #1c1612;
  --mx-ink: #25201c;
  --mx-soft: #6f655b;
  --mx-champ: #a8875a;
  --mx-champ-lt: #d9c19a;
  --mx-od: #f1e9dd;
  --mx-od-soft: #a79b8b;
  --mx-line: rgba(37, 32, 28, .14);
  --mx-od-line: rgba(241, 233, 221, .16);
  --mx-ease: cubic-bezier(.2, .7, .1, 1);
  --mx-g: var(--gutter, clamp(20px, 6vw, 96px));
  --mx-serif: var(--serif, 'Cormorant Garamond', Georgia, serif);
  --mx-mono: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  position: relative;
  padding: clamp(84px, 9vw, 150px) 0;
  background: var(--mx-ivory);
  color: var(--mx-ink);
  overflow-x: clip;
}
.mx--cream { background: var(--mx-cream); }
.mx--dark { background: var(--mx-esp); color: var(--mx-od); }
.mx--tight { padding-top: clamp(40px, 4vw, 70px); }
.mx :where(h2, p, figure, ul, li, blockquote) { margin: 0; padding: 0; }
.mx ul { list-style: none; }
.mx img, .mx video { display: block; max-width: 100%; }

/* ── Head: label, heading, lead, arrows ─────────────────────────────────── */
.mx__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 28px 40px; padding: 0 var(--mx-g); margin-bottom: clamp(38px, 4vw, 64px);
}
.mx__label {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  font: 500 11px/1.5 var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-soft);
}
.mx__label::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.mx__label b { font-weight: 500; color: var(--mx-champ); }
.mx--dark .mx__label { color: var(--mx-od-soft); }
.mx--dark .mx__label b { color: var(--mx-champ-lt); }
.mx .mx__h2 {
  font: 500 clamp(44px, 5.6vw, 100px)/.92 var(--mx-serif); letter-spacing: -.034em;
  text-transform: none; color: inherit;
}
.mx__h2 span { display: block; }
.mx__h2 em { font-style: italic; color: var(--mx-champ); }
.mx--dark .mx__h2 em { color: var(--mx-champ-lt); }
.mx__lead {
  grid-column: 1; max-width: 40ch;
  font: 400 clamp(19px, 1.5vw, 24px)/1.45 var(--mx-serif); color: var(--mx-soft);
}
.mx--dark .mx__lead { color: var(--mx-od-soft); }
.mx__nav { grid-column: 2; grid-row: 2 / span 2; display: flex; gap: 10px; align-self: end; }
.mx__btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--mx-line); background: transparent; color: inherit; cursor: pointer;
  font: 400 18px/1 Inter, Arial, sans-serif;
  transition: background-color .5s var(--mx-ease), border-color .5s var(--mx-ease), opacity .4s;
}
.mx--dark .mx__btn { border-color: var(--mx-od-line); }
.mx__btn:hover { background: rgba(168, 135, 90, .12); border-color: var(--mx-champ); }
.mx__btn[disabled] { opacity: .28; cursor: default; background: transparent; }
.mx a:focus-visible, .mx button:focus-visible, .mx video:focus-visible { outline: 1px solid var(--mx-champ); outline-offset: 4px; }

.mx__cap {
  display: flex; gap: 12px; margin-top: 14px;
  font: 400 10.5px/1.5 var(--mx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mx-soft);
}
.mx__cap span { color: var(--mx-champ); flex: none; }
.mx--dark .mx__cap { color: var(--mx-od-soft); }
.mx--dark .mx__cap span { color: var(--mx-champ-lt); }

/* ── Film reel: a row of portrait films that scrolls sideways ───────────── */
.mx .mx-reel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(214px, 22vw, 330px);
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--mx-g);
  padding: 0 var(--mx-g) 6px;
  scrollbar-width: none;
}
.mx-reel__track::-webkit-scrollbar { display: none; }
.mx-clip { scroll-snap-align: start; }
.mx-clip__frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: #0f0c0a; border-radius: 2px;
}
.mx .mx-clip__frame video, .mx .mx-clip__frame img { width: 100%; height: 100%; object-fit: cover; }
.mx-clip__frame::after {            /* a quiet shade so the toggle reads on light footage */
  content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 12, 10, .42), transparent);
}
.mx-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(241, 233, 221, .45);
  background: rgba(20, 16, 13, .38); color: #f1e9dd; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .4s var(--mx-ease), transform .5s var(--mx-ease);
}
.mx-toggle:hover { background: rgba(20, 16, 13, .6); transform: scale(1.06); }
.mx-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.mx-toggle .i-play { display: none; }
.mx-toggle[aria-pressed="false"] .i-play { display: block; }
.mx-toggle[aria-pressed="false"] .i-pause { display: none; }
.mx-clip .mx__cap { margin-top: 12px; }
.mx-reel__foot {
  display: flex; justify-content: space-between; gap: 20px; padding: 26px var(--mx-g) 0;
  font: 400 10.5px/1.5 var(--mx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mx-soft);
}
.mx--dark .mx-reel__foot { color: var(--mx-od-soft); }
.mx-reel__bar { flex: 1; max-width: 320px; height: 1px; align-self: center; background: var(--mx-line); position: relative; overflow: hidden; }
.mx--dark .mx-reel__bar { background: var(--mx-od-line); }
.mx-reel__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--mx-p, 0) * 100%); min-width: 18%; background: var(--mx-champ); transition: width .3s linear; }
.mx--dark .mx-reel__bar i { background: var(--mx-champ-lt); }

/* ── Photo mosaic: justified rows, each photo whole, each opens full size ─
   Columns left gaps (two photos in a three-column grid, a bare fourth
   column), so every row now spans the width: figures grow by their own
   width/height ratio (--r), which gives the row one height. Three photos or
   fewer sit beside the heading (--side); --mw keeps tall ones in view. */
.mx-mosaic__grid { display: grid; gap: clamp(12px, 1.4vw, 22px); padding: 0 var(--mx-g); }
.mx-mosaic__row { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 22px); }
.mx .mx-mosaic__row > .mx-ph { flex: var(--r, 1) 1 0; min-width: 0; margin: 0; }
.mx-mosaic--side, .mx-tri--2 {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center;
  column-gap: clamp(40px, 5vw, 96px); padding-inline: var(--mx-g);
}
.mx-mosaic--side .mx__head, .mx-tri--2 .mx-tri__head { display: block; padding: 0; margin: 0; }
.mx-mosaic--side .mx__h2 { margin-top: 26px; font-size: clamp(40px, 4.2vw, 80px); }
.mx-mosaic--side .mx__lead { margin-top: 26px; }
.mx-mosaic--side .mx-mosaic__grid, .mx-tri--2 .mx-mosaic__grid { padding: 0; width: 100%; max-width: var(--mw, none); justify-self: end; }
.mx-ph { break-inside: avoid; margin: 0 0 clamp(12px, 1.4vw, 22px); }
.mx-ph__open { display: block; position: relative; overflow: hidden; background: #e2d5c2; cursor: zoom-in; }
.mx--dark .mx-ph__open { background: #2a221c; }
.mx-ph__open img { width: 100%; height: auto; transition: transform 1.6s var(--mx-ease), filter .6s var(--mx-ease); }
@media (hover: hover) {
  .mx-ph__open:hover img { transform: scale(1.035); }
}
.mx-ph .mx__cap { margin-top: 10px; }

/* ── Before & after, wide pairs (results page) ─────────────────────────── */
.mx-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(20px, 2.4vw, 40px); padding: 0 var(--mx-g); }
.mx-pair__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mx-pair__half { position: relative; overflow: hidden; background: #e2d5c2; }
.mx .mx-pair__half img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 739 / 420; }
.mx-pair__tag {
  position: absolute; left: 10px; top: 10px; padding: 5px 9px;
  font: 500 9.5px/1 var(--mx-mono); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(246, 241, 233, .9); color: var(--mx-ink);
}
.mx-pair__half--a .mx-pair__tag { background: var(--mx-esp); color: var(--mx-od); }

/* ── Feature film: one film beside its words ───────────────────────────── */
.mx-feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px); align-items: center; padding-inline: var(--mx-g);
}
.mx-feature--rev .mx-feature__media { order: 2; }
.mx-feature__media { max-width: 440px; width: 100%; justify-self: center; }
.mx-feature__media .mx-clip__frame { border-radius: 2px; }
.mx .mx-feature__media video[controls] { object-fit: contain; background: #0f0c0a; }
.mx-feature__text { max-width: 560px; }
.mx-feature__text .mx__label { margin-bottom: 26px; }
.mx-feature__text .mx__lead { margin-top: 28px; max-width: 34ch; }
.mx-feature__text p + p { margin-top: 18px; }
.mx-feature__body { font: 400 15px/1.7 Inter, Arial, sans-serif; color: var(--mx-soft); max-width: 46ch; }
.mx--dark .mx-feature__body { color: var(--mx-od-soft); }
.mx-feature__list { margin-top: 30px !important; border-top: 1px solid var(--mx-line); }
.mx--dark .mx-feature__list { border-color: var(--mx-od-line); }
.mx-feature__list li {
  display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: 1px solid var(--mx-line);
  font: 400 clamp(17px, 1.3vw, 20px)/1.35 var(--mx-serif);
}
.mx--dark .mx-feature__list li { border-color: var(--mx-od-line); }
.mx-feature__list li span { font: 500 10.5px/2.2 var(--mx-mono); letter-spacing: .14em; color: var(--mx-champ); }
.mx--dark .mx-feature__list li span { color: var(--mx-champ-lt); }

/* ── Interlude: a photograph between chapters, shown whole ──────────────
   The user found the full-bleed bands cropped, so the photograph keeps its own
   shape: never cropped, never wider than its pixels (--w), at most 78vh tall,
   on espresso with its caption below. (.mx .mx-il__media img outranks
   treatment.css's .tx main img.) */
.mx.mx-il { padding: clamp(44px, 5vw, 84px) var(--mx-g); background: var(--mx-esp); color: var(--mx-od); }
.mx-il__media { margin: 0 auto; width: fit-content; max-width: 100%; }
.mx .mx-il__media img { display: block; width: auto; height: auto; max-width: min(100%, var(--w, 1600px)); max-height: 78vh; margin: 0 auto; }
.mx-il__cap {
  display: flex; justify-content: center; gap: 12px; margin-top: 16px; text-align: center;
  font: 400 10.5px/1.5 var(--mx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mx-od-soft);
}
.mx-il__cap span { color: var(--mx-champ-lt); flex: none; }

/* ── Triptych: two or three portraits in a row, one short sentence ─────── */
.mx-tri__head { padding: 0 var(--mx-g); margin-bottom: clamp(28px, 3vw, 44px); }
.mx-tri__line { margin-top: 18px; max-width: 34ch; font: 400 clamp(24px, 2.4vw, 38px)/1.2 var(--mx-serif); }
.mx-tri__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px); padding: 0 var(--mx-g);
}
.mx-tri .mx-ph { margin: 0; }
.mx.mx-tri--2 .mx-ph__open img { aspect-ratio: auto; height: auto; object-fit: fill; }   /* whole, at their own shape */
.mx-tri--2 .mx-tri__line { max-width: 16ch; font-size: clamp(32px, 3.2vw, 58px); line-height: 1.08; letter-spacing: -.02em; }   /* beside the photos, a display line */
.mx-tri .mx-ph__open img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; }

/* ── Film strip: one row of whole photos on espresso (results) ──────────
   Replaced the drifting ribbon (the user, 2026-09-23: "ugly" — ragged heights,
   because .tx main img {height:auto} outranked it). Every photo stands at one
   height and its own shape (--r). media.js slides the row sideways while the
   page scrolls past (.is-linked) and lights the photo nearest the middle
   (--lit); without it the row simply scrolls sideways. */
.mx-strip { --sh: clamp(240px, 36vh, 380px); }
.mx-strip__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36ch); align-items: end;
  gap: 26px clamp(40px, 6vw, 120px); padding: 0 var(--mx-g); margin-bottom: clamp(44px, 5vw, 84px);
}
.mx-strip__head .mx__label { grid-column: 1 / -1; }
.mx-strip__head .mx__lead { grid-column: 2; padding-bottom: .6em; }
.mx-strip__view {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--mx-g); padding: 0 var(--mx-g);
}
.mx-strip__view::-webkit-scrollbar { display: none; }
.mx-strip__view.is-linked { overflow: hidden; scroll-snap-type: none; }
.mx .mx-strip__track { display: flex; gap: clamp(12px, 1.3vw, 22px); width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.mx-strip__ph { flex: none; scroll-snap-align: start; }
.mx-strip__ph .mx-ph__open { display: block; background: #2a221c; overflow: hidden; }
.mx .mx-strip__ph img { height: var(--sh); width: calc(var(--sh) * var(--r, 1)); max-width: none; object-fit: cover; }
.mx-strip__ph .mx__cap { margin-top: 12px; }
.mx-strip__view.is-linked .mx-strip__ph { opacity: calc(.38 + .62 * var(--lit, 1)); transition: opacity .35s linear; }
.mx-strip__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px var(--mx-g) 0;
  font: 400 10.5px/1.5 var(--mx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mx-od-soft);
}
.mx-strip__count b { font-weight: 500; color: var(--mx-champ-lt); }

/* ── Sticky stack: the words stay, the photos stack while scrolling ────── */
.mx-stack {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px); padding-inline: var(--mx-g); align-items: start;
}
.mx-stack__text { position: sticky; top: clamp(96px, 18vh, 160px); }
.mx-stack__text .mx__h2 { margin-top: 26px; }
.mx-stack__text .mx__lead { margin-top: 28px; }
.mx-stack__photos .mx-ph {
  position: sticky; top: calc(clamp(96px, 18vh, 160px) + var(--i, 0) * 18px);
  margin: 0 0 clamp(40px, 8vh, 90px);
  background: #e2d5c2; border: 1px solid rgba(37, 32, 28, .1);
  box-shadow: 0 -18px 44px rgba(28, 22, 18, .16);
}
.mx-stack__photos .mx-ph:last-child { margin-bottom: 0; }
.mx-stack__photos .mx-ph img { width: 100%; height: auto; }

/* ── In-chapter photographs on treatment pages (built by build_pages.py) ─
   A single photograph never wider than its own pixels or 560px (mx-solo),
   and a smaller pair for photographs under ~750px wide (txpair--small), so
   nothing is shown larger than it was made. Standalone, like .mx-in. */
.tx .mx-solo { width: min(var(--w, 560px), 52vw); margin: 0; }
.tx .mx-solo > div { overflow: hidden; background: #0f0c0a; }
/* the photograph beside one line of words, so it never stands alone in the column */
.tx .mx-soloset {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(32px, 6vw, 110px); margin-right: calc(8.33% * 1);
}
.tx .mx-soloset--l { grid-template-columns: auto minmax(0, 1fr); margin-right: 0; margin-left: calc(8.33% * 1); }
.tx .mx-soloset--l .mx-solo { grid-column: 1; grid-row: 1; }
.tx .mx-soloset--l .mx-soloset__line { grid-column: 2; grid-row: 1; }
.tx .mx-soloset__line {
  margin: 0; max-width: 24ch; justify-self: center;
  font: 400 clamp(24px, 2.2vw, 36px)/1.28 var(--serif, 'Cormorant Garamond', Georgia, serif); letter-spacing: -.01em;
}
.tx .mx-solo img { width: 100%; height: auto; }
.tx .txpair--small .txpair__a { grid-column: 2 / 7; }
.tx .txpair--small .txpair__b { grid-column: 7 / 11; margin-top: clamp(90px, 10vw, 180px); }

/* ── Photo-in-text: a figure floated inside a chapter's text column ──────
   Lands outside .mx sections (in treatment chapters), so it stands alone
   with literal values and var() fallbacks instead of the .mx tokens. */
.mx-intext { overflow: auto; }        /* contain the float */
.mx-in { float: right; width: min(38%, 360px); margin: 6px 0 28px 36px; }
/* In a treatment chapter the text and its photo sit side by side instead of
   floating: the chapter leads carry their own offsets (txdes__lead is pushed
   right with margin-left: auto), which a float turns into a wide empty gap. */
.tx .mx-intext {
  overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(32px, 5vw, 90px); align-items: center;
  margin: clamp(40px, 4.5vw, 70px) calc(8.33% * 1) 0 0;
}
.tx .mx-intext > p { margin: 0; max-width: none; }
.tx .mx-intext > .mx-in { float: none; width: auto; margin: 0; grid-column: 2; grid-row: 1; }
.tx .mx-intext > .mx-in img { width: 100%; height: auto; }
.mx-in .mx-ph__open img { display: block; }
.mx-in .mx__cap {
  display: flex; gap: 12px; margin-top: 10px;
  font: 400 10.5px/1.5 var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase;
  color: inherit; opacity: .75;       /* reads on both light and dark chapters */
}
.mx-in .mx__cap span { color: var(--mx-champ-lt, #d9c19a); flex: none; }

/* ── Lightbox (a <dialog> made by media.js) ────────────────────────────── */
.mx-lb {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(16, 12, 10, .96); color: #f1e9dd;
}
.mx-lb::backdrop { background: rgba(16, 12, 10, .9); }
.mx-lb[open] { display: grid; grid-template-rows: 1fr auto; }
.mx-lb__stage { position: relative; display: grid; place-items: center; padding: 64px 76px 12px; min-height: 0; }
.mx-lb__stage img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; }
.mx-lb__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 28px 26px;
  font: 400 10.5px/1.5 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #a79b8b;
}
.mx-lb__btn {
  position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(241, 233, 221, .22); background: rgba(16, 12, 10, .4); color: #f1e9dd;
  font: 400 19px/1 Inter, Arial, sans-serif; cursor: pointer; display: grid; place-items: center;
}
.mx-lb__btn:hover { border-color: #d9c19a; }
.mx-lb__btn:focus-visible { outline: 1px solid #d9c19a; outline-offset: 3px; }
.mx-lb__close { top: 14px; right: 18px; }
.mx-lb__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.mx-lb__next { right: 14px; top: 50%; transform: translateY(-50%); }
html.mx-lock { overflow: hidden; }

/* ── Reveal (media.js adds .is-in; nothing hides without it) ───────────── */
.mx-js .mx [data-mx="rise"] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--mx-ease) var(--d, 0ms), transform 1.2s var(--mx-ease) var(--d, 0ms); }
.mx-js .mx [data-mx="rise"].is-in { opacity: 1; transform: none; }

/* ── Tablet and phone ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .mx-pairs { grid-template-columns: 1fr; }
  /* too narrow for words beside photos: heading above, rows full width */
  .mx-mosaic--side, .mx-tri--2 { display: block; padding-inline: 0; }
  .mx-mosaic--side .mx__head, .mx-tri--2 .mx-tri__head { padding: 0 var(--mx-g); margin-bottom: clamp(30px, 4vw, 44px); }
  .mx-mosaic--side .mx-mosaic__grid, .mx-tri--2 .mx-mosaic__grid { padding: 0 var(--mx-g); max-width: none; }
  .mx-tri--2 .mx-tri__line { max-width: 24ch; font-size: clamp(24px, 4vw, 34px); }
}
@media (max-width: 800px) {
  .mx { padding-top: 76px; padding-bottom: 76px; }
  .mx__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
  .mx__nav { display: none; }
  .mx-reel__track { grid-auto-columns: 64vw; }
  /* phones: two columns of whole photos (the rows dissolve into them) */
  .mx-mosaic__grid { display: block; columns: 2; column-gap: 10px; }
  .mx-mosaic__row { display: contents; }
  .mx-ph, .mx .mx-mosaic__row > .mx-ph { margin: 0 0 10px; }
  .mx-ph .mx__cap { font-size: 9.5px; letter-spacing: .1em; }
  .mx-pairs { gap: 36px; padding: 0; }
  .mx-pair .mx__cap { padding: 0 var(--mx-g); }
  .mx-feature { grid-template-columns: 1fr; gap: 36px; }
  .mx-feature--rev .mx-feature__media { order: 0; }
  .mx-feature__media { max-width: 78vw; }
  .mx-lb__stage { padding: 64px 10px 8px; }
  .mx-lb__prev, .mx-lb__next { top: auto; bottom: 14px; transform: none; }
  .mx-lb__bar { padding: 12px 84px 24px; justify-content: center; text-align: center; }
  .mx-lb__bar [data-lb-count] { display: none; }
  .mx-tri__grid, .mx-tri--2 .mx-tri__grid { grid-template-columns: 1fr; }
  .mx-tri .mx-ph { max-width: 78vw; margin-inline: auto; }
  .mx-strip { --sh: clamp(220px, 34vh, 300px); }
  .mx-strip__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
  .mx-strip__head .mx__lead { grid-column: 1; padding: 0; }
  .mx-strip__foot { padding-top: 22px; }
  .mx-stack { grid-template-columns: 1fr; }
  .mx-stack__text, .mx-stack__photos .mx-ph { position: static; }
  .mx-in { float: none; width: 100%; margin: 0 0 28px; }
  .tx .mx-intext { grid-template-columns: 1fr; gap: 28px; margin: 36px 0 0; }
  .tx .mx-intext > .mx-in { grid-column: 1; grid-row: 2; max-width: 78vw; }
  .tx .mx-soloset, .tx .mx-soloset--l { grid-template-columns: 1fr; gap: 24px; margin-left: 0; margin-right: 0; }
  .tx .mx-soloset--l .mx-solo { grid-row: 2; }
  .tx .mx-soloset .mx-soloset__line { justify-self: start; grid-column: 1; font-size: 24px; }
  .tx .mx-soloset .mx-solo { width: min(var(--w, 560px), 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .mx-js .mx [data-mx="rise"] { opacity: 1; transform: none; transition: none; }
  .mx-ph__open img, .mx__btn, .mx-toggle { transition: none; }
  .mx-reel__track { scroll-behavior: auto; }
  .mx-stack__photos .mx-ph { position: static; }
}