/* Madison & Beyond case study — mirrors the Behance gallery layout:
   https://www.behance.net/gallery/223923683/Madison-Beyond-Real-estate-agency
   The case study is the exported slides stacked full-width, edge to edge, so
   each slide's own background meets the next exactly as it does on Behance.
   Nav, footer and buttons come from shared.css so this page matches the other
   case studies. Scoped to .madison-page throughout. */

body.madison-page {
  /* sampled from the slides themselves */
  --mb-cream: #fff3e6;  /* branding sheet background — the brand's paper tone */
  --mb-brown: #52382c;  /* hero background */
  --mb-sage:  #587373;  /* website mock-up background */
  --mb-tan:   #d9a066;  /* accent for text on the dark hero — 4.7:1 on brown */

  --h-margin: max(1.5rem, 7vw);

  background: var(--mb-cream);
}

/* The nav is fixed and content scrolls under it, so it needs an opaque
   background. Cream keeps the dark shared.css nav links readable over all
   three slide colours. */
body.madison-page .nav {
  background: var(--mb-cream);
}

/* Full-bleed: the slides run edge to edge with no side gutters. Deliberately
   no max-width — a cap left a visible strip of page cream down both sides of
   the brown cover on wide screens. Slides are 1920px so they stay sharp.
   Uses width:100% (not 100vw, which includes the scrollbar and would cause a
   horizontal scrollbar). */
body.madison-page .mb-case {
  display: block;
  width: 100%;
  /* clears the fixed nav so it never sits over the cover artwork */
  padding-top: 3.5rem;
}

body.madison-page .mb-slide {
  display: block;
  width: 100%;
  height: auto;
}

/* Both exports carry a wide margin of their own flat background around the
   actual content — full-bleed at width:100% already, so "no borders" was
   already true of the CSS, but the CONTENT read small within that frame.
   Cropped in per feedback ("make it bigger"), same object-fit:cover-in-a-
   fixed-ratio-box technique as the hero above, not edited in the source
   file. Re-measured tighter after a second round of feedback ("even
   bigger, no borders") — the first pass's bbox scan flagged ANY non-
   background pixel, which included the hero pattern's own faint dashed
   contour lines bleeding into these two exports as well (same pitfall the
   hero crop above was already careful to avoid). A density scan (only
   counting a column/row as "content" if it clears 15% of the darkest
   column/row's pixel count) separates that sparse decoration from the
   actual dense content — but the branding board's own "Poppins" / "DM
   Serif Display" type sample is ALSO fairly sparse (thin letterforms), so
   the same threshold that excludes the dashes also clipped the tail of
   that text — seen in an actual render, not assumed. A small buffer
   (~2.5% per side) restored on top of the density-scanned box fixed it:
     branding  content bbox 26%-90% x 19%-87% of the source (buffered)
     website   content bbox 21.2%-86.1% x  6.0%-92.7% of the source */
body.madison-page .mb-slide--branding {
  aspect-ratio: 1228 / 873;
  object-fit: cover;
  object-position: 72.2% 59.4%;
}
body.madison-page .mb-slide--website {
  aspect-ratio: 1245 / 1308;
  object-fit: cover;
  object-position: 60.4% 45.1%;
}

/* ═══ HERO ══════════════════════════════════════════════════════════════
   Mobile-first base: stacked, image above text (matching Trulli's rebuilt
   header), not overlaid — text sits on the page's own cream, not on the
   dark brown image, hence dark ink colours here. The image itself is
   cropped to centre the logo mark, since the full 1920px export is much
   wider than the mark — object-fit:cover in a fixed aspect-ratio box (not
   editing the source file). Measured pixel-by-pixel (dense-pixel-column
   scan to separate the logo from the sparse dashed contour texture that
   runs the image's full width): the mark + wordmark's own bounding box
   spans x 67.1%-81.7%, centred at 74.4%. The aspect ratio chosen
   (1920:1600, i.e. showing the middle 984px-equivalent slice) is the
   widest crop that can still centre that point without running off the
   right edge of the source.

   Desktop (≥701px) reverts to the overlay layout this page had before
   that change — full uncropped image, text overlaid into its own flat
   espresso-brown region on the left (nearest artwork starts at 48.3% of
   the image's width, measured pixel-by-pixel) — per feedback ("like it
   was!!"). Light-on-brown colours only apply at this width, since that's
   the only width where text actually sits on the dark image rather than
   on the page's cream. */
body.madison-page .mb-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 1600;
  object-fit: cover;
  object-position: 100% center;
}

body.madison-page .mb-hero-text {
  padding: 3rem var(--h-margin) 0;
  max-width: 46rem;
}

body.madison-page .mb-hero .project-title {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mb-brown);
}

body.madison-page .mb-hero .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6a4a;
  margin-top: 0.35rem;
}

body.madison-page .mb-hero .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: #8a6a4a;
  margin: 0.9rem 0 1.25rem;
}
body.madison-page .mb-hero .project-tags span + span::before {
  content: '|';
  margin: 0 0.6rem;
  opacity: 0.55;
}

body.madison-page .mb-hero .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--mb-brown);
}
body.madison-page .mb-hero .project-desc strong {
  font-weight: 700;
}

@media (max-width: 700px) {
  body.madison-page .mb-hero-text {
    max-width: none;
    padding-top: 2.5rem;
  }
}

@media (min-width: 701px) {
  body.madison-page .mb-hero {
    position: relative;
    display: grid;
  }
  body.madison-page .mb-hero-img {
    grid-area: 1 / 1;
    aspect-ratio: auto;
    object-fit: initial;
    object-position: initial;
  }
  body.madison-page .mb-hero-text {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    align-self: center;
    margin-left: var(--h-margin);
    width: min(40%, 34rem);
    padding: 0;
    max-width: none;
  }
  body.madison-page .mb-hero .project-title,
  body.madison-page .mb-hero .project-desc {
    color: var(--mb-cream);
  }
  body.madison-page .mb-hero .project-desc { opacity: 0.92; }
  body.madison-page .mb-hero .project-label,
  body.madison-page .mb-hero .project-tags {
    color: var(--mb-tan);
  }
  body.madison-page .mb-hero .project-desc strong { color: #fff; }
}

/* ═══ SECTION HEADINGS ═════════════════════════════════════════════════ */
body.madison-page .mb-text {
  padding: 4.5rem var(--h-margin) 2rem;
}

body.madison-page .section-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mb-brown);
}