/* MTJL Stories -- additions to the site's own episode-page styles (vista-*, loc-*, arch-*, mtjl-btn). */
.mtjls-sheet { max-width: 1100px; margin: 0 auto; }
.mtjls-sheet.mtjls-wide { max-width: 1240px; }
.mtjls-meta { margin: -0.35rem 0 1.4rem; }
.mtjls-meta a, .mtjls-tags a { color: #f4b942; text-decoration: underline; text-underline-offset: .15em; }

/* Main image */
.mtjls-main { margin: 0 0 1.5rem; }
.mtjls-main img { display: block; width: 100%; height: auto; border-radius: 22px; }
.mtjls-main figcaption, .mtjls-videos figcaption { color: #a39d94; font-size: .875rem; line-height: 1.5; margin-top: .5rem; }

/* Videos */
.mtjls-videos { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
.mtjls-video { margin: 0; }
.mtjls-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; }
.mtjls-frame iframe, .mtjls-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mtjls-frame video { object-fit: contain; background: #000; }
.mtjls-play:focus-visible { outline: 3px solid #f4b942; outline-offset: -3px; }
.mtjls-play-plain { background: #121115; }
.mtjls-video-link { margin: 0; }

/* Story text (the reading panel is the site's .vista-read) */
.mtjls-read { margin-bottom: 1.5rem; }
.mtjls-read h2, .mtjls-read h3, .mtjls-read h4 { color: #1c1914; font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .02em; line-height: 1.05; margin: 1.7rem 0 .6rem; }
.mtjls-read h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.mtjls-read h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); }
.mtjls-read ul, .mtjls-read ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.mtjls-read li { margin: 0 0 .35rem; }
.mtjls-read img { max-width: 100%; height: auto; }
/* Webflow's rich text narrows figures to 60%; story images use the full panel width. */
.mtjls-read figure, .mtjls-read .wp-block-image { display: block; max-width: 100%; width: auto; margin: 1.6rem 0; }
.mtjls-read .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 14px; }
.mtjls-read cite { display: block; margin-top: .5rem; color: #5b5248; font-size: .9rem; font-style: normal; font-weight: 400; }
.mtjls-read .wp-block-pullquote { margin: 1.6rem 0; padding: 1.2rem 0; border-top: 3px solid #b4532a; border-bottom: 3px solid #b4532a; text-align: left; }
.mtjls-read .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.mtjls-read .wp-block-pullquote p { font-size: 1.35rem; font-weight: 700; line-height: 1.4; }
.mtjls-read hr { border: 0; border-top: 1px solid #b9ae9c; margin: 1.6rem 0; }
.mtjls-read .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: .9rem 0 1.3rem; }
.mtjls-read a.mtjl-btn { color: #1a0e04; text-decoration: none; }
.mtjls-read a.mtjl-btn:hover { background-color: #ffb703; }
.mtjls-read .wp-block-embed { margin: 1.4rem 0; }
.mtjls-read .mtjls-video figcaption { color: #5b5248; }
.mtjls-read .wp-block-image figcaption { color: #5b5248; }
.mtjls-tags { margin-top: 0; }
.mtjls-back { margin-top: 2rem; }

/* Lists */
.mtjls-sub { color: #ddd8ce; max-width: 46rem; margin: 0 0 1.6rem; font-size: 1.05rem; line-height: 1.6; }
.mtjls-featured { display: grid; gap: .75rem; margin: 0 0 2rem; }
.mtjls-featured .mtjls-stage { aspect-ratio: 21 / 9; }
.mtjls-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 2rem; }
.mtjls-toolbar .mtjls-cats { margin: 0; }
.mtjls-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mtjls-search { display: flex; align-items: center; gap: .4rem; }
.mtjls-search input, .mtjls-tag-select { min-height: 2.6rem; padding: .5rem .95rem; color: #f7f4ee; font: 400 .95rem Inter, system-ui, sans-serif; background: #141317; border: 1px solid #ffffff33; border-radius: 999px; }
.mtjls-search input { width: min(16rem, 60vw); }
.mtjls-search input:focus, .mtjls-tag-select:focus { outline: 3px solid #f4b942; outline-offset: 1px; border-color: #ff8a3d; }
.mtjls-search-btn { padding: .6rem 1.1rem; cursor: pointer; }
.mtjls-tag-select { padding-right: 2rem; }
.mtjls-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mtjls-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.mtjls-cats a { padding: .45rem .95rem; border: 1px solid #ffffff33; border-radius: 999px; color: #f7f4ee; font-family: Space Mono, ui-monospace, monospace; font-size: .75rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.mtjls-cats a:hover { border-color: #ff8a3d; }
.mtjls-cats a.is-current { background: #ff8a3d; border-color: #ff8a3d; color: #1a0e04; }
.mtjls-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .mtjls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mtjls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mtjls-card { margin: 0; }
.mtjls-card-link { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: #f7f4ee; text-decoration: none; background: #141317; border: 1px solid #ffffff14; border-radius: 20px; transition: border-color .2s, transform .2s; }
.mtjls-card-link:hover, .mtjls-card-link:focus-visible { border-color: #ff8a3d; transform: translateY(-2px); }
.mtjls-card-link:focus-visible { outline: 3px solid #f4b942; outline-offset: 2px; }
.mtjls-card-media { aspect-ratio: 16 / 10; background: #1f1d22; }
.mtjls-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mtjls-card-body { display: grid; align-content: start; gap: .55rem; padding: 1.1rem 1.2rem 1.4rem; font-family: Inter, system-ui, sans-serif; }
.mtjls-card .arch-story-title { color: #f7f4ee; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); }
.mtjls-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.mtjls-empty { color: #ddd8ce; }

@media (max-width: 860px) { .mtjls-featured .mtjls-stage { aspect-ratio: auto; } }
@media (max-width: 640px) {
  .mtjls-read.vista-read { padding: 1.35rem 1.1rem 1rem; }
  .mtjls-search { flex: 1 1 100%; }
  .mtjls-search input { flex: 1; width: auto; }
  .mtjls-main img { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mtjls-card-link { transition: none; } .mtjls-card-link:hover { transform: none; } }