/* Raduzhniy — arts center logo & brand identity case study.
   Source: https://www.behance.net/gallery/196616013/Raduzhniy-arts-center-logo-branding

   Header hero and the Branding palette board are native exports on the
   brand's own cream (#FCF5ED); the application mock-ups (still the original
   Behance slides) each carry their own coloured backdrop. Page background
   is set to that cream so the native exports meet it seamlessly.

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

body.raduzhniy-page {
  --rad-cream:   #fcf5ed;
  --rad-ink:     #3a3a3a;  /* softened from the export's #535353 for body text */
  --rad-coral:   #f28a8a;  /* deepened from #FCAAAA for AA contrast on cream */
  --rad-blue:    #4bb8e0;  /* deepened from #95DEFD for AA contrast on cream */
  --h-margin: max(1.5rem, 7vw);

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

body.raduzhniy-page .nav {
  background: var(--rad-cream);
}

/* Full-bleed: no max-width, no side padding. width:100% not 100vw (100vw
   includes the scrollbar gutter and would cause horizontal scroll). */
body.raduzhniy-page .rad-case {
  display: block;
  width: 100%;
  padding-top: 3.5rem;
}

body.raduzhniy-page .rad-section { display: block; width: 100%; }

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

/* Sized down and centered instead of full-bleed, per feedback — these are
   reference/spec boards rather than photographic slides, so they read
   better contained than stretched edge to edge. Same treatment as the
   Trulli palette board on pizza-pasta.html. */
body.raduzhniy-page .rad-slide--contained {
  width: min(90%, 62rem);
  margin: 0 auto;
}

/* No heading in this section any more (removed per feedback), so the gap
   that heading's own padding used to create needs replacing here instead —
   otherwise this section's first slide would butt straight against the
   Branding section's last slide with no visual break between them. */
body.raduzhniy-page .rad-applications {
  margin-top: 4rem;
}

/* ═══ TITLE BLOCK ══════════════════════════════════════════════════════
   Grid-stack, same pattern as Madison & Beyond and Restaurant redesign:
   the image fills the whole header at its natural width, the text div
   overlays it in the same grid cell. Two things constrain the text box:
     - horizontal: the ring of arcs starts around 59% of the image's own
       rendered width, capping how wide the text can go before it touches it.
     - vertical: this export also carries a band of solid brand colour
       across its full width along the bottom ~14% of its height. align-
       self:start (not center) keeps the text anchored near the top, and
       the description's line count changes non-monotonically as the column
       reflows at different widths (verified empirically, not assumed) — so
       the mobile stack breakpoint is set well past where clearance turns
       reliably positive (measured negative as late as 1135px), at 1200px,
       rather than this page's usual 700px. */
body.raduzhniy-page .rad-intro {
  position: relative;
  display: grid;
}

body.raduzhniy-page .rad-hero-img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
}

body.raduzhniy-page .rad-intro-text {
  grid-area: 1 / 1;
  align-self: start;
  max-width: 34rem;
  padding: 3.5rem var(--h-margin) 3rem;
}

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

body.raduzhniy-page .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #756f66; /* 4.6:1 on cream — #8a8378 measured only 3.47:1 */
  margin-top: 0.35rem;
}

body.raduzhniy-page .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: #aa5a34; /* 4.6:1 on cream — #c96b3e measured only 3.43:1 */
  margin: 0.9rem 0 1.25rem;
}
body.raduzhniy-page .project-tags span + span::before {
  content: '|';
  margin: 0 0.6rem;
  opacity: 0.45;
}

body.raduzhniy-page .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 46rem;
  color: var(--rad-ink);
}
body.raduzhniy-page .project-desc em { font-style: italic; opacity: 0.8; }

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

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

@media (max-width: 1200px) {
  body.raduzhniy-page .rad-intro { display: block; }
  body.raduzhniy-page .rad-intro-text {
    max-width: none;
    padding: 2.5rem var(--h-margin) 2.5rem;
  }
}

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