/* =====================================
   SAULT STE. MARIE MUSEUM CASE STUDY
====================================== */

.museum .case-study {
  --museum-slate: #415465;
  --museum-khaki: #ae8877;
  --museum-moss: #41695b;
  --museum-paper: #f2f0eb;
}

.museum .case-study img { display: block; width: 100%; height: auto; }
.museum .case-study figure { margin: 0; }
.museum-case-hero h1,
.museum-overview h2,
.museum-section-heading h2,
.museum-final h2,
.museum-guide h2,
.museum-merch h2,
.museum-outcome h2 { color: #101a21; }
.museum-overview h2,
.museum-section-heading h2,
.museum-final h2,
.museum-guide h2,
.museum-merch h2,
.museum-outcome h2 {
  margin: .65rem 0 1.5rem;
  font: 600 clamp(2.25rem,4.4vw,4.6rem)/1 var(--display);
  letter-spacing: -.045em;
}
.museum figcaption,.museum-caption {
  padding-block: .85rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.museum-hero { color: white; background: var(--museum-slate); }
.museum-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  padding-block: 9rem;
}
.museum-copy .lead { margin-top: 0; font: 500 clamp(1.3rem,2vw,2rem)/1.25 var(--display); }
.museum-comparison,.museum-process,.museum-system,.museum-digital { padding-block: 8rem; }
.museum-comparison,.museum-system { background: var(--museum-paper); }
.museum-process { color: white; background: var(--museum-slate); }
.museum-process h2 { color: white; }
.museum-section-heading {
  display: grid;
  grid-template-columns: .4fr 1fr .8fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
.museum-section-heading h2 { margin-top: 0; }
.museum-compare-grid,.museum-process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.museum-compare-grid figure {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(1rem,2vw,2rem);
  background: white;
}
.museum-compare-grid img { align-self: center; max-height: 34rem; object-fit: contain; }
.museum-process-grid figure { padding: 1rem; color: #101a21; background: white; }
.museum-final,.museum-guide {
  display: grid;
  grid-template-columns: .72fr 1fr;
  align-items: center;
  gap: 7%;
  padding-block: 9rem;
}
.museum-system-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.museum-system-grid figure:last-child { grid-column: 1 / -1; }
.museum-guide { grid-template-columns: .6fr 1.2fr; }
.museum-digital { padding-bottom: 0; color: white; background: var(--museum-moss); }
.museum-digital h2 { color: white; }
.museum-caption { color: white; }
.museum-merch {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  padding-block: 9rem;
}
.museum-merch-copy { grid-column: 1 / -1; max-width: 52rem; margin-bottom: 2rem; }
.museum-merch figure { background: var(--museum-paper); }
.museum-merch figcaption { padding-inline: 1rem; }
.museum-outcome { max-width: 64rem; padding-block: 9rem; }
.museum-outcome > p:last-child { max-width: 48rem; font-size: 1.1rem; }
.museum-reveal { opacity: 0; transform: translateY(2.5rem); transition: opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.museum-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width:850px) {
  .museum-overview,.museum-section-heading,.museum-compare-grid,.museum-process-grid,.museum-final,.museum-guide,.museum-system-grid,.museum-merch { grid-template-columns:1fr; gap:2.5rem; }
  .museum-overview,.museum-final,.museum-guide,.museum-merch,.museum-outcome { padding-block:6rem; }
  .museum-system-grid figure:last-child,.museum-merch-copy { grid-column:auto; }
}

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