/* ============================================================
   More Projects — overflow case-study page
   Recreated from "extra projects.fig": alternating navy / white
   bands, each a mini-project with photo grid + centred caption.
   Styled to sit inside the portfolio design system.
   ============================================================ */

.mp { --mp-navy: #0E1F39; background: var(--white); }

/* ---- Hero ---- */
.mp-hero {
  position: relative;
  overflow: hidden;
  background: #3D517D;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 9vw, 160px) var(--gutter);
}
.mp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.mp-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.mp-hero__slide.is-active { opacity: 1; }
.mp-hero__cell {
  flex: 1 1 0;
  min-width: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mp-hero__overlay { position: absolute; inset: 0; background: rgba(14, 31, 57, 0.8); }
.mp-hero__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(38px, 6.5vw, 104px);
  color: var(--white);
  line-height: 0.92;
}
.mp-hero__title .extruded--flat { color: var(--white); text-shadow:
   1px 1px 0 var(--mp-navy), 2px 2px 0 var(--mp-navy), 3px 3px 0 var(--mp-navy),
   4px 4px 0 var(--mp-navy), 5px 5px 0 var(--mp-navy), 6px 6px 0 var(--mp-navy),
   7px 7px 0 var(--mp-navy); }

/* ---- Band ---- */
.mp-band { padding: clamp(72px, 9vw, 160px) 0; }
.mp-band--dark { background: var(--mp-navy); }
.mp-band--light { background: var(--white); }

/* ---- Caption (title + description), centred ---- */
.mp-cap { max-width: 920px; margin: clamp(48px, 5vw, 86px) auto 0; text-align: center; }
.mp-title {
  margin: 0 0 clamp(20px, 2vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
  font-size: clamp(28px, 3.6vw, 58px);
}
.mp-desc {
  margin: 0 auto;
  max-width: 820px;
  font-weight: 300;
  font-size: clamp(17px, 1.3vw, 23px);
  line-height: 1.6;
  text-wrap: pretty;
}
.mp-band--dark .mp-title { color: var(--white); }
.mp-band--dark .mp-desc  { color: #DCE3F2; }
.mp-band--light .mp-title { color: var(--navy-deep); }
.mp-band--light .mp-desc  { color: var(--navy-bio); }

/* ---- Exact-arrangement photo grid (Lane End / Distortion / Boutique) ---- */
.mp-grid { position: relative; width: 100%; overflow: hidden; }
.mp-tile {
  position: absolute;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mp-tile image-slot { width: 100%; height: 100%; display: block; }

/* ---- Simple row grids (Bake Sale / Children's Book) ---- */
.mp-row { display: grid; gap: clamp(14px, 1.4vw, 26px); }
.mp-row--3 { grid-template-columns: repeat(3, 1fr); }
.mp-row__cell { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.mp-row--bake .mp-row__cell { aspect-ratio: 531 / 798; }
.mp-row--kids .mp-row__cell { aspect-ratio: 554 / 536; }

/* ---- Ampli-Ear: wide banner over main advert ---- */
.mp-ampli { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 28px); }
.mp-ampli__banner { width: 100%; display: block; }
.mp-ampli__main { width: 100%; aspect-ratio: 2200 / 1650; }
.mp-ampli__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Animation: single wide frame ---- */
.mp-anim { width: 100%; aspect-ratio: 1652 / 922; }
.mp-anim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-anim__video { width: 100%; height: 100%; display: block; border: 0; }

/* ---- Click-to-enlarge lightbox ---- */
.mp-zoom { cursor: zoom-in; }
.mp-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 31, 57, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vmin, 72px);
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mp-lb.is-open { opacity: 1; pointer-events: auto; }
.mp-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.28s ease;
}
.mp-lb.is-open .mp-lb__img { transform: scale(1); }
.mp-lb__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(16px, 2.6vw, 36px);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.mp-lb__close:hover { background: rgba(255, 255, 255, 0.24); }

/* ---- Navy nav + footer, scoped to this page only ---- */
.nav--mp { background: #0E1F39; }
.footer--mp { background: #0E1F39; }

/* ============================================================
   Hand in Hand — modular typeface project (appended section)
   ============================================================ */
.hih .mp-zoom { transition: transform 0.45s var(--ease); }
.hih .mp-zoom:hover { transform: translateY(-5px); }

/* intro: description (left) + construction diagram (right) */
.hih-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
}
.hih-intro__text .mp-title { text-align: left; }
.hih-intro__text .mp-desc { margin: 0; max-width: 640px; text-align: left; }
.hih-intro__diagram img { width: 100%; height: auto; display: block; max-width: 500px; margin-inline: auto; }

/* hand photos — row of three */
.hih-hands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
  margin-top: clamp(44px, 5vw, 88px);
  max-width: 800px;
}
.hih-hands img { width: 100%; height: 100%; aspect-ratio: 255 / 347; object-fit: cover; display: block; }

/* construction studies — two up */
.hih-sketch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 44px);
  margin-top: clamp(44px, 5vw, 88px);
  align-items: center;
}
.hih-sketch img { width: 100%; height: auto; display: block; }

/* single full-width specimen sheet */
.hih-full { margin-top: clamp(44px, 5vw, 88px); }
.hih-full img { width: 100%; height: auto; display: block; }


/* three navy studio pieces — side by side */
.hih-books {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(52px, 6vw, 104px);
}
.hih-books__col {
  flex: none;
  width: calc(50% - clamp(8px, 1vw, 15px));
}
.hih-books__col img { width: 100%; height: auto; display: block; object-fit: contain; }
.hih-books__col--small {
  width: calc((50% - clamp(8px, 1vw, 15px)) * 1497 / 2030 / 2 * 2558 / 3544 * 1.5 * 1.25);
  position: relative;
  top: 6px;
}

/* four application mockups — 2×2 layout */
.hih-mockups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: clamp(40px, 5vw, 90px);
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(70px, 8vw, 130px);
}
.hih-mockups img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #0E1F39;
  box-shadow: 0 30px 64px -36px rgba(14, 31, 57, 0.45);
}

@media (max-width: 860px) {
  .hih-intro { grid-template-columns: 1fr; gap: 36px; }
  .hih-intro__diagram img { max-width: 420px; }
}
@media (max-width: 600px) {
  .hih-intro__text { text-align: center; }
  .hih-intro__text .mp-title { text-align: center; }
  .hih-intro__text .mp-desc { text-align: center; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hih-hands { grid-template-columns: 1fr 1fr 1fr; }
  .hih-books { flex-direction: column; max-width: 360px; margin-inline: auto; }
  .hih-books__col { width: 100%; }
  .hih-books__col--small { width: 60%; margin-inline: auto; }
  .hih-mockups { grid-template-columns: 1fr; }
}