/* Method and Work pages. Type comes from the --t-* tokens in type.css. */
.mw-jump { display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: 3rem; }
.mw-jump a { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding: .6rem 1rem; border: 1px solid var(--otl-ink); border-radius: 2rem; transition: background .25s ease, color .25s ease; }
.mw-jump a:hover { background: var(--otl-ink); color: var(--otl-paper); }

.mw-stage { padding-top: 5rem; padding-bottom: 5rem; scroll-margin-top: 4rem; }
.mw-stage--dark { background: var(--otl-ink); color: var(--otl-paper); }
.mw-stage--dark .custom-container { padding-top: 5rem; padding-bottom: 5rem; }
.mw-stage__head { display: grid; gap: 1rem; max-width: 52rem; margin-bottom: 3.5rem; }
.mw-stage__num { font: var(--t-eyebrow); letter-spacing: .02em; color: var(--otl-muted); }
.mw-stage__name { font: var(--t-display); letter-spacing: -0.03em; }
.mw-stage__line { font: var(--t-h2); letter-spacing: -0.01em; }
.mw-stage__lede { font: var(--t-lead); color: var(--otl-text); max-width: 42rem; }
.mw-stage--dark .mw-stage__lede, .mw-stage--dark .mw-principle__body, .mw-stage--dark .mw-cap__sub, .mw-stage--dark .mw-faq__a { color: var(--border-1); }

.mw-principle { display: grid; gap: 1.25rem; max-width: 46rem; margin-bottom: 3.5rem; }
.mw-principle__title { font: var(--t-h3); }
.mw-principle__body { font: var(--t-body-lg); color: var(--otl-text); }
.mw-questions { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--border-1); }
.mw-questions li { font: var(--t-h5); padding: 1rem 0; border-bottom: 1px solid var(--border-1); }

.mw-caps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 3rem; }
@media (min-width: 48em) { .mw-caps { grid-template-columns: repeat(2, 1fr); } }
.mw-cap { background: var(--otl-card); color: var(--otl-ink); border-radius: 1.5rem; padding: 2rem; display: grid; gap: 1rem; align-content: start; }
.mw-cap__title { font: var(--t-h4); }
.mw-cap__sub { font: var(--t-body-lg); color: var(--otl-text); }
.mw-cap .mw-cap__sub { color: var(--otl-text); }
.mw-cap__list { list-style: none; padding: 0; margin: .5rem 0 0; border-top: 1px solid var(--border-1-hover); }
.mw-cap__list li { font: var(--t-body); padding: .6rem 0; border-bottom: 1px solid var(--border-1); }

.mw-faq { max-width: 46rem; border-top: 1px solid rgba(128, 128, 128, .4); }
.mw-faq__item { border-bottom: 1px solid rgba(128, 128, 128, .4); }
.mw-faq__q { font: var(--t-h5); padding: 1.1rem 2rem 1.1rem 0; cursor: pointer; list-style: none; position: relative; }
.mw-faq__q::-webkit-details-marker { display: none; }
.mw-faq__q::after { content: "+"; position: absolute; right: 0; top: 1.1rem; font: var(--t-h5); transition: transform .25s ease; }
.mw-faq__item[open] .mw-faq__q::after { transform: rotate(45deg); }
.mw-faq__a { font: var(--t-body-lg); color: var(--otl-text); padding-bottom: 1.25rem; }

/* Work */
.mw-cats { display: grid; gap: 0; padding-bottom: 0; }
.mw-cat { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; min-height: 100svh; padding: 5.5rem 0 3rem; box-sizing: border-box; }
@media (min-width: 48em) {
    .mw-cat { grid-template-columns: 4fr 6fr; gap: 5rem; padding: 6.5rem 0 4rem; }
    .mw-cat--flip .mw-cat__media { order: 2; }
}
.mw-cat__media { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 5; background: var(--otl-card); max-height: 38svh; justify-self: start; }
@media (min-width: 768px) { .mw-cat__media { max-height: 56svh; width: 100%; max-width: 30rem; justify-self: center; } .mw-cat--flip .mw-cat__media { justify-self: center; } }
.mw-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-cat__body { display: grid; gap: 1rem; }
.mw-cat__num { font: var(--t-eyebrow); letter-spacing: .02em; color: var(--otl-muted); }
.mw-cat__title { font: var(--t-h2); letter-spacing: -0.02em; }
.mw-cat__lead { font: var(--t-lead); }
.mw-cat__text { font: var(--t-body-lg); color: var(--otl-text); max-width: 38rem; }
.mw-cat__tags { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mw-cat__tags li { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .02em; padding: .45rem .8rem; border: 1px solid var(--border-1-hover); border-radius: 2rem; }

.mw-cta { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding-top: 2rem; padding-bottom: 6rem; border-top: 1px solid var(--otl-ink); }
.mw-cta__title { font: var(--t-h2); max-width: 20ch; }

/* Phones: let the category image use the full width */
@media (max-width: 767px) {
    .mw-cat__media { width: 100%; aspect-ratio: 16 / 11; max-height: 34svh; }
}