/*
 * The mission files, one page per role (/work/bridgend-college, /work/plusmove).
 * Built on project.css (the page, its sections and its ending) and the mission patches
 * (work-patches.css).
 */
.mf-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.mf-hero__patch { display: grid; place-items: center; }
.mf-hero__patch .mpatch { width: min(100%, 25rem); height: auto; filter: drop-shadow(0 30px 60px rgb(0 0 0 / 0.65)); }
.mf-hero__text { display: grid; gap: 1rem; justify-items: start; }
.mf-title { font: 200 clamp(2.6rem, 6vw, 5.2rem)/0.95 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--star); }
.mf-role { font: italic 500 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--serif); color: var(--gold); }
.mf-lede { max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: rgb(243 239 226 / 0.86); }
.mf-hero .mp-stats { margin-top: 0.4rem; }

.mf-note { max-width: 62ch; margin-top: 1rem; font: italic 500 1.05rem/1.4 var(--serif); color: var(--muted); }
.mf-log { display: grid; gap: var(--gap-item); margin: var(--gap-item) 0 0; padding: 0; list-style: none; counter-reset: mf; }
.mf-entry { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem 1.4rem; padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.mf-entry__n { grid-row: 1 / span 4; font: 700 1.5rem/1 var(--mono); color: var(--hud); }
.mf-entry h3 { font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.mf-entry__line { font: italic 500 1.1rem/1.3 var(--serif); color: var(--gold); }
.mf-entry__what { max-width: 68ch; color: rgb(243 239 226 / 0.84); }
.mf-entry dl { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin: 0.5rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.mf-entry dt { font: 400 0.6rem/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud-dim); }
.mf-entry dd { margin: 0.3rem 0 0; font-size: 0.98rem; }
.mf-stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--gap-item) 0 0; padding: 0; list-style: none; }
.mf-stack li { padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font: 400 0.68rem/1.2 var(--mono); letter-spacing: 0.08em; color: var(--star); }

.mf-next { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.2rem; }
.mf-next .mpatch { grid-row: 1 / span 3; width: 6.5rem; height: auto; }

@media (max-width: 56rem) {
  .mf-hero { grid-template-columns: minmax(0, 1fr); }
  .mf-hero__patch .mpatch { width: min(70vw, 18rem); }
}
@media (max-width: 40rem) {
  .mf-entry { grid-template-columns: minmax(0, 1fr); }
  .mf-entry__n { grid-row: auto; }
}