/* More work.
   Sections rather than a tile grid: one project per section, media-led, with a
   short paragraph of background. Colours all come from tokens, so the page
   follows [data-theme="more-work"] and reverts to light if that is removed.

   The one exception is --mw-plate-light below, which must NOT follow the theme:
   it is the light backing that keeps light UI screenshots from floating on the
   dark ground. */
:root {
  --mw-plate-light: #FFFFFF;
}

/* .cs-device normally outlines in var(--accent), which on the case-study pages
   is a bright per-project color and on this page (no accent override) resolves
   to near-white. That reads as too loud against dark project media, so this
   page overrides the frame to a neutral phone-bevel grey instead. Scoped to
   [data-theme="more-work"] specifically, not edited in case-study.css, so the
   case studies keep their intended bright/accent-colored outline. */
[data-theme="more-work"] .cs-device {
  border-color: #585858;
}

.mw-header {
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-12);
}

.mw-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-12);
  transition: color 0.2s ease;
}

.mw-header__back:hover {
  color: var(--color-text-primary);
}

/* Matches .cs-header__title on the case studies */
.mw-header__title {
  font-size: var(--fs-display);
  margin-bottom: var(--sp-6);
}

.mw-header__summary {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* Index. Lets a visitor see what's on the page without scrolling all of it,
   which is the one thing the old tile grid was genuinely good at. */
.mw-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}

.mw-index__link {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mw-index__link:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.mw-project {
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-24);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: var(--sp-8);
}

.mw-project:last-of-type {
  padding-bottom: var(--sp-32);
}

.mw-project__eyebrow {
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--sp-3);
}

.mw-project__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-4);
}

/* Deliberately capped. If a project needs more than this it wants to be a
   case study, not an entry on this page. */
.mw-project__body {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin-bottom: var(--sp-12);
}

/* The plate: every asset gets the same container so brightness reads as
   rhythm down the page instead of as light leaking out of random rectangles. */
.mw-plate {
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mw-plate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mw-plate img,
.mw-plate video {
  display: block;
  width: 100%;
  height: auto;
}

/* For light UI screenshots. Keeps its own light ground regardless of theme,
   with padding so the asset has a margin rather than butting the edge. */
.mw-plate--light {
  background: var(--mw-plate-light);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}

/* For phone media, which brings its own frame and needs no plate behind it.
   The media inside keeps width:100% so it fits .cs-device's 320px cap;
   overriding that to auto lets the raw file size blow the frame out. */
.mw-plate--device {
  display: flex;
  justify-content: center;
  background: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* A run of paragraphs that belong together. .mw-project__body is sized for a
   single standalone paragraph and carries a big bottom margin to push the next
   block away; inside a run that margin reads as a gap between unrelated ideas. */
.mw-prose {
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
}

.mw-prose p + p {
  margin-top: var(--sp-4);
}

/* Several related assets shown together with captions. Column count is set per
   instance, because three portrait patent figures and a pair of landscape clips
   want different grids. Replaces the old fixed four-up. */
.mw-figures {
  display: grid;
  grid-template-columns: repeat(var(--mw-cols, 3), minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.mw-figures figure {
  margin: 0;
}

.mw-figures figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

/* Copy beside a tall asset. Same lesson as the case studies: cap the text
   track rather than letting it flex, or the media gets shoved to the margin. */
.mw-split {
  display: grid;
  grid-template-columns: minmax(0, 520px) 340px;
  gap: var(--sp-16);
  align-items: center;
}

/* The default split is sized for a portrait phone in the media track. A
   landscape lead image needs the opposite balance, or it shrinks to a stamp. */
.mw-split--wide {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}

.mw-split__copy > *:first-child {
  margin-top: 0;
}

.mw-split__copy p + p {
  margin-top: var(--sp-4);
}

/* Separation between the stacked blocks inside a project. Lives on the blocks
   themselves rather than on a heading's margin, which is the trap this codebase
   has fallen into repeatedly. Any new block-level class must be added here. */
.mw-split + .mw-plate,
.mw-plate + .mw-plate,
.mw-plate + .mw-split,
.mw-plate + .mw-project__body,
.mw-plate + .mw-prose {
  margin-top: var(--sp-24);
}

.mw-prose + .mw-plate {
  margin-top: var(--sp-12);
}

/* Screen flow. A horizontal strip in the order the screens happen, rather than
   a grid, because these trace a user flow. Uniform height keeps the top and
   bottom edges clean, so the long scrolling screens simply read as narrower. */
.mw-strip {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  overscroll-behavior-x: contain;
}

/* <picture> is the flex child, so it carries the shrink rule; the <img> inside
   it is what actually gets sized. */
.mw-strip picture {
  display: block;
  flex-shrink: 0;
}

/* The strip sizes by height and lets width follow the image. Two things fight
   that on narrow screens: base.css sets a global img { max-width: 100% }, which
   caps a landscape still at the container width while height stays fixed and
   squashes it, and flex would then shrink it further. Portrait screenshots never
   hit either, which is why only Roambi's landscape shots distorted. Both are
   released here so stills behave exactly like .mw-strip video below. */
.mw-strip img {
  height: 560px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

/* Clips sit in the strip on the same terms as stills: matched height, natural
   width, and the same hairline so light and dark media share one edge. */
.mw-strip video {
  height: 560px;
  width: auto;
  display: block;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.mw-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.mw-strip__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .mw-plate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .mw-header {
    padding-top: var(--sp-16);
  }

  .mw-project {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }

  .mw-plate--light {
    padding: var(--sp-4);
  }
}

@media (max-width: 900px) {
  .mw-split {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .mw-split--wide {
    grid-template-columns: 1fr;
  }

  .mw-split .mw-plate--device {
    max-width: 340px;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  /* Two columns survives on a phone for figure grids; three does not. */
  .mw-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@media (max-width: 520px) {
  .mw-figures {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mw-strip img,
  .mw-strip video {
    height: 420px;
  }
}