/* ═══════════════════════════════════════════════════════════════════
   case.css — paorestrepo.com case studies
   Shared editorial system. Extends style.css (tokens, .wrap, .kicker,
   .cover-headline, .index-list, .reveal, footer, navbar …).
   One accent only: the site red. Client brand colours appear as content.
═══════════════════════════════════════════════════════════════════ */

/* ── Back link ──────────────────────────────────────────────── */
.cs-back {
  display: inline-block;
  margin: calc(1.15rem + 1.4rem + 2rem) 0 0 var(--margin);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .18s;
}
.cs-back::before { content: "\2190\00a0\00a0"; color: var(--red); }
.cs-back:hover { color: var(--ink); }

/* ── Cover ──────────────────────────────────────────────────── */
.cs-cover {
  padding-top: 1.6rem;
  padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.cs-issue {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cs-issue .ci-left  { color: var(--red); }
.cs-issue .ci-right { color: var(--muted); }

.cs-cover .cover-headline {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  font-size: clamp(2rem, 6vw, 4.7rem);
  line-height: .95;
}
.cs-standfirst {
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: none;
}

/* ── Meta band (imprint rows) ───────────────────────────────── */
.cs-meta {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.cs-meta-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.cs-meta-cell {
  padding: 1.5rem var(--margin);
  border-right: 1px solid var(--rule);
}
.cs-meta-cell:last-child { border-right: 0; }
.cs-meta-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .45rem;
}
.cs-meta-val {
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
}

/* ── Numbers band ───────────────────────────────────────────── */
.cs-band {
  background: var(--ink);
  color: #fff;
}
.cs-band-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cs-band-cell {
  padding: 2.2rem var(--margin);
  border-right: 1px solid rgba(255,255,255,.14);
}
.cs-band-cell:last-child { border-right: 0; }
.cs-band-num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: .01em;
}
.cs-band-num span { font-family: var(--sans); font-size: .38em; color: var(--red); vertical-align: super; }
.cs-band-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: .55rem;
  line-height: 1.5;
}

/* ── Section ────────────────────────────────────────────────── */
.cs-sec { padding-block: clamp(4rem, 8vw, 7rem); }
.cs-sec--gray { background: var(--gray); }
.cs-sec--ink  { background: var(--ink); color: #fff; }
.cs-sec--ink .dept-title { color: #fff; }
.cs-sec--ink .cs-body { color: rgba(255,255,255,.55); }

.cs-sec .dept { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cs-sec .dept-title { font-size: clamp(1.8rem, 4vw, 3rem); }

/* ── Body copy blocks ───────────────────────────────────────── */
.cs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 72rem;
}
.cs-col-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .7rem;
}
.cs-body {
  font-size: .96rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.85;
}
.cs-body + .cs-body { margin-top: 1rem; }
.cs-lead {
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.85;
  max-width: 62ch;
  margin-top: 1.4rem;
}
.cs-sec--ink .cs-lead { color: rgba(255,255,255,.55); }

/* ── Colour swatches (client brand, shown as content) ───────── */
.cs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.cs-sw { flex: 1 1 8rem; }
.cs-sw-chip {
  height: 56px;
  border: 1px solid var(--rule);
  margin-bottom: .6rem;
}
.cs-sw-name {
  font-family: var(--display);
  font-size: .9rem;
  color: var(--ink);
}
.cs-sw-hex {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Cell grid (domains / logo variants) ────────────────────── */
.cs-cells {
  display: grid;
  border: 1px solid var(--ink);
  border-bottom: 0;
  margin-top: 2.4rem;
}
.cs-cells--3 { grid-template-columns: repeat(3, 1fr); }
.cs-cells--4 { grid-template-columns: repeat(4, 1fr); }
.cs-cell {
  padding: 1.8rem 1.4rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink);
  transition: background .2s;
}
.cs-cell:last-child { border-right: 0; }
.cs-cell:hover { background: var(--white); }
.cs-cell-title {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: .35rem;
  transition: color .2s;
  word-break: break-word;
}
.cs-cell:hover .cs-cell-title { color: var(--red); }
.cs-cell-desc {
  font-size: .72rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.55;
}
.cs-cell-fig {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}
.cs-cell-fig img { max-width: 100%; max-height: 68px; object-fit: contain; }

/* ── Deliverables / timeline reuse .index-list from style.css ─ */
.cs-sec--ink .index-list { border-top-color: rgba(255,255,255,.28); }
.cs-sec--ink .index-row { border-bottom-color: rgba(255,255,255,.16); }
.cs-sec--ink .index-row:hover { background: rgba(255,255,255,.04); }
.cs-sec--ink .ix-folio { color: rgba(255,255,255,.35); }
.cs-sec--ink .ix-name { color: #fff; }
.cs-sec--ink .ix-body p { color: rgba(255,255,255,.5); }

/* ── Plates gallery ─────────────────────────────────────────── */
.cs-plates {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-top: 2.6rem;
}
.cs-plate {
  position: relative;
  overflow: hidden;
  background: var(--gray);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.cs-plate--wide { grid-column: span 3; }
.cs-plate--tall { grid-column: span 3; aspect-ratio: 3 / 2; }
.cs-plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(.3) contrast(1.02);
  transition: transform .6s var(--ease), filter .45s;
}
.cs-plate:hover img { transform: scale(1.04); filter: grayscale(0); }
.cs-plate-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: .8rem 1rem;
  background: linear-gradient(to top, rgba(26,26,24,.92), transparent);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .3s;
}
.cs-plate:hover .cs-plate-cap { opacity: 1; }
.cs-plate-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Context note ───────────────────────────────────────────── */
.cs-note {
  display: block;
  margin-top: 2.4rem;
  padding: 1.3rem 0 1.3rem 1.5rem;
  border-left: 2px solid var(--red);
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: none;
}
.cs-sec--gray .cs-note { background: transparent; }
.cs-note strong { font-weight: 600; color: var(--ink); }

/* ── Next project ───────────────────────────────────────────── */
.cs-next {
  background: #111110;
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cs-next-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
}
.cs-next-kicker {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .8rem;
}
.cs-next-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.08;
  color: #fff;
}
.cs-next-actions { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cs-meta-inner { grid-template-columns: repeat(2, 1fr); }
  .cs-meta-cell:nth-child(2n) { border-right: 0; }
  .cs-band-inner { grid-template-columns: repeat(2, 1fr); }
  .cs-band-cell:nth-child(2n) { border-right: 0; }
  .cs-cols { grid-template-columns: 1fr; }
  .cs-plates { grid-template-columns: repeat(2, 1fr); }
  .cs-plate, .cs-plate--wide, .cs-plate--tall { grid-column: span 1; aspect-ratio: 4 / 3; }
  .cs-cells--3, .cs-cells--4 { grid-template-columns: repeat(2, 1fr); }
  .cs-cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .cs-meta-inner, .cs-band-inner,
  .cs-cells--3, .cs-cells--4 { grid-template-columns: 1fr; }
  .cs-meta-cell, .cs-band-cell, .cs-cell { border-right: 0; }
  .cs-plates { grid-template-columns: 1fr; }
  .cs-swatches { gap: 1rem; }
}

/* ── Display weight (see style.css) — Prata renders heavier ──── */
.cs-band-num, .cs-sw-name, .cs-cell-title, .cs-next-title {
  font-weight: 700;
}