/* Research Core Facility — visual system case study.
   Source: https://www.behance.net/gallery/252613967/Visual-System-for-Research-Core-Facility

   Rebuilt from four native (non-Behance) exports, prefixed core_, in place
   of the old single 1918x7048 Behance mega-image. Three background colours
   run down the page, all sampled/sourced exactly rather than eyeballed:
     - header: the header export's own flat peach (#ffe2c2, sampled with PIL)
     - problem/solution: the brand's own near-black (#0E0C0D, from the
       palette board's swatch)
     - everything else: white — the page's default background
   Brochure and signage exports are opaque photographs (full alpha, no
   transparency) so they sit full-bleed with no background-matching needed.
   The palette board is a transparent-background export (verified with PIL),
   which is why it needs no white card of its own any more now that the
   Branding section's own background already is white.

   No native asset was supplied for the old "04 Training materials" section
   (instrument manual pages) — that section is omitted here, not cropped out
   of the old mega-image (see the old file's own reasoning for why that image
   was never meant to be split). Flagged for the project owner to decide
   whether to add a training-materials asset later.

   Nav, footer and buttons come from shared.css. Scoped to .research-page. */

body.research-page {
  --rcf-peach: #ffe2c2;   /* core_header.png's own flat background, sampled */
  --rcf-black: #0e0c0d;   /* core_palette.png's own near-black swatch */
  --rcf-accent: #efa974;  /* core_palette.png's own peach swatch — 9.8:1 on --rcf-black */
  --rcf-blue:   #8096d9;  /* core_palette.png's own periwinkle swatch — 6.76:1 on --rcf-black */
  --rcf-ink:   #1a1a1a;   /* headings — 14.0:1 on white and on peach */
  --rcf-label: #5a5a5a;   /* deepened for AA — the site's usual #6b6b6b is only 4.3:1 on peach */
  --rcf-tag:   #984500;   /* deepened from the brand's own burnt orange #bf5700 (3.7:1) for AA — 5.3:1 on peach */
  --h-margin: max(1.5rem, 7vw);

  background: #ffffff;
}

/* Solid white — per feedback the hero image should not run behind/under
   the nav after all (it briefly did, floating translucently), so the nav
   no longer needs to read as sitting "on" the artwork. Solid also avoids a
   muddy look later in the page, where the fixed nav can reappear (on
   scroll-up) over the black Problem/Solution section. */
body.research-page .nav {
  background: #ffffff;
}

/* Full-bleed: no max-width, no side padding. width:100% not 100vw (100vw
   includes the scrollbar gutter and would cause horizontal scroll).
   padding-top matches the fixed nav's own rendered height exactly
   (measured via getBoundingClientRect, not assumed from the CSS box model:
   67px at ≥701px, 59px at ≤700px, matching shared.css's own nav breakpoint)
   so the hero image starts immediately after the nav — no gap, no overlap. */
body.research-page .rcf-case {
  display: block;
  width: 100%;
  padding-top: 67px;
}
@media (max-width: 700px) {
  body.research-page .rcf-case { padding-top: 59px; }
}

body.research-page .rcf-section { display: block; width: 100%; }

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

/* Last full-bleed slide on the page gets a little breathing room before the
   page-nav buttons (shared.css gives page-nav its own top margin, but the
   photo's own bottom edge otherwise butts straight against it). */
body.research-page .rcf-slide--last {
  margin-bottom: 1rem;
}

/* ═══ TITLE BLOCK ══════════════════════════════════════════════════════
   Per feedback: stacked, image above text (matching Trulli's and Madison's
   rebuilt headers), starting right at the bottom edge of the nav — not
   underneath it (see .rcf-case's padding-top above, matched exactly to the
   nav's own rendered height). The logomark is already centred in the
   source (2391x2100, nearly square) so a plain centred crop (object-
   fit:cover in a fixed aspect-ratio box, not editing the source file) is
   enough — no left/right repositioning needed, unlike Madison's off-centre
   mark. */
body.research-page .rcf-intro {
  background: var(--rcf-peach);
}

/* No width/height attributes on this img in the HTML — confirmed by testing
   (not assumed) that they actively fight this rule: with the file's native
   2391x2100 as attributes, Chrome rendered this element at height:2100px
   (the raw attribute value, ignoring the crop) despite aspect-ratio here
   correctly computing to 2391/1155 in getComputedStyle — the two only
   disagree once the attributes' own ratio (1.139) differs from this rule's
   (2.071). Dropping the attributes and letting aspect-ratio alone reserve
   the layout space (which is what they're for anyway) resolved it. */
body.research-page .rcf-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 2391 / 1155;
  object-fit: cover;
  object-position: center;
}

body.research-page .rcf-intro-text {
  padding: 3rem var(--h-margin) 0;
  max-width: 46rem;
}

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

body.research-page .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rcf-label);
  margin-top: 0.35rem;
}

body.research-page .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rcf-tag);
  margin: 0.9rem 0 1.25rem;
}
body.research-page .project-tags span + span::before {
  content: '|';
  margin: 0 0.6rem;
  opacity: 0.4;
}

body.research-page .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--rcf-ink);
}

@media (max-width: 700px) {
  body.research-page .rcf-intro-text {
    max-width: none;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ═══ THE PROBLEM / THE SOLUTION ═══════════════════════════════════════
   Retyped from Behance's own challenge/approach spread as real HTML, on the
   brand's own near-black (--rcf-black, sampled from core_palette.png's
   swatch) with the peach swatch as the heading accent — 9.8:1 and 16.7:1
   contrast respectively, computed via WCAG relative luminance. */
body.research-page .rcf-problem {
  background: var(--rcf-black);
  padding: 5rem var(--h-margin);
}

body.research-page .rcf-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 75rem;
  margin: 0 auto;
}

body.research-page .rcf-problem-heading {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rcf-accent);
  margin-bottom: 1rem;
}
body.research-page .rcf-problem-heading--blue {
  color: var(--rcf-blue); /* periwinkle #8096D9 — 6.76:1 on --rcf-black */
}

body.research-page .rcf-problem-copy {
  font-size: 1rem;
  line-height: 1.8;
  color: #f2ede6; /* near-white — 16.7:1 on --rcf-black */
}

@media (max-width: 700px) {
  body.research-page .rcf-problem-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ═══ SECTION HEADINGS ═════════════════════════════════════════════════ */
body.research-page .rcf-text {
  padding: 5rem var(--h-margin) 2rem;
}

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

/* ═══ BRANDING ═════════════════════════════════════════════════════════
   core_palette.png has a transparent background (verified with PIL) — no
   white card needed any more since the page background from here on is
   already white. Sized down and centered, made bigger per feedback. */
body.research-page .rcf-slide--contained {
  width: min(92%, 78rem);
  margin: 0 auto;
  display: block;
}

@media (max-width: 700px) {
  body.research-page .rcf-text { padding-top: 3.5rem; }
}