/* =============================================================
   ROPAN CASE STUDY
   A light editorial page — no dark stage. ROPAN is a visual
   design case study, not a product one: the landing page image
   itself carries the story, so the surrounding system stays
   quiet. Purple (sampled from the ROPAN wordmark) is the only
   accent, used sparingly for eyebrows and the one inline link.

   This file is self-contained (mirrors klymb.css's pattern of
   owning its own chapter/reflection/project-nav shell rather
   than importing one) so the two case studies can evolve
   independently.
   ============================================================= */

.cs {
  --ropan: #3B1E6B; /* deep violet — sampled from the ROPAN wordmark */
  --chapter-gap: clamp(3.25rem, 6vw, 5.5rem);
}

/* =============================================================
   HERO
   Masthead, then the complete landing page shown once as a
   tall, framed "poster" — not a cropped preview. It exists so a
   reader immediately understands this is one continuous page;
   the same image returns at full, readable size in the showcase
   chapter below.
   ============================================================= */
.r-hero {
  padding-top: var(--space-6);
}

.r-hero__masthead {
  max-width: 52ch;
}

.r-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ropan);
}

.r-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-3);
}

.r-hero__oneline {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.r-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}

.r-hero__meta div dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.r-hero__meta div dd {
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* the brand concept artwork — full container width, shown at its own
   natural ratio. The complete landing page lives later, uncropped, in
   the showcase chapter. */
.r-hero__poster {
  margin-top: var(--space-8);
}

.r-hero__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.r-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================================
   CHAPTER SHELL — same rhythm as the rest of the portfolio
   ============================================================= */
.chapter {
  padding-block: var(--chapter-gap);
}

.chapter__head {
  max-width: 46ch;
  margin-bottom: var(--space-7);
}

.chapter__index {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.chapter__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ropan);
}

.chapter__title {
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
}

.chapter__lead {
  margin-top: var(--space-4);
  max-width: 52ch;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

.chapter--tight {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* =============================================================
   CONTEXT — plain body paragraphs, no device/evidence framing.
   Restraint is the point: this section explains, it doesn't show.
   ============================================================= */
.chapter__body {
  margin-top: var(--space-6);
  max-width: 58ch;
  color: var(--color-text-secondary);
}

.chapter__body p + p {
  margin-top: var(--space-4);
}

.r-behance {
  margin-top: var(--space-6);
}

/* =============================================================
   SHOWCASE — the complete landing page at full, readable width.
   No crops, no annotations, no callouts — the page is the case
   study, so the reader just scrolls through it.
   ============================================================= */
.r-showcase {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.r-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================================
   REFLECTION + PROJECT NAVIGATION
   ============================================================= */
.reflection { padding-bottom: var(--space-6); }

.reflection__inner { max-width: 60ch; }

.reflection__title {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
}

.reflection__text {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.project-nav {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-8);
}

.project-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.project-nav__prev {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.project-nav__prev-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.project-nav__prev-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}

.project-nav__prev:hover .project-nav__prev-name { color: var(--ropan); }

.project-nav__next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.project-nav__next-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.project-nav__next-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}

.project-nav__next:hover .project-nav__next-name { color: var(--ropan); }