/* ═══════════════════════════════════════════════════════════════════
   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;
}

/* ═════════════════════════════════════════════════════════════
   BENTO — brand system overview (reusable on every case study)
   Tile sizes keep a fixed ratio at every width (container units):
   .bt--hero 4:3 · .bt--tall 2:3 · .bt--sq 4:3 · .bt--wide 8:3 · .bt--half 2:1
═════════════════════════════════════════════════════════════ */
.cs-bento-sec { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem); }
.bento {
  --g: clamp(6px, .7vw, 10px);
  --cols: 12;
  --bento-max: 960px;            /* overall size of the grid — change here */
  container-type: inline-size;
  max-width: var(--bento-max);
  margin-inline: auto;
}
.bento-grid {
  --c: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: calc((var(--c) * 4 + var(--g) * 3) * .75);
  grid-auto-flow: dense;
  gap: var(--g);
}
.bt {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--gray);
  cursor: zoom-in;
  grid-column: span 4;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.bento.in .bt { opacity: 1; transform: none; }
.bt::before {                /* hairline frame so white images don't melt into the page */
  content: ""; position: absolute; inset: 0; z-index: 1;
  border: 1px solid var(--rule); pointer-events: none;
}
.bt--hero { grid-column: span 8; grid-row: span 2; }
.bt--tall { grid-column: span 4; grid-row: span 2; }
.bt--sq   { grid-column: span 4; }
.bt--wide { grid-column: span 8; }
.bt--half { grid-column: span 6; }
.bt--full { grid-column: span 12; }

/* text tile (no image) */
.bt--text {
  cursor: default;
  display: flex; align-items: flex-end;
  padding: clamp(1rem, 2.2cqw, 1.6rem);
  background: #004C97;
  color: #FFE14D;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6cqw, 1.9rem);
  line-height: 1.05;
}
.bt--text p { margin: 0; }
.bt img, .bt video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease);
}
.bt:hover img, .bt:hover video { transform: scale(1.03); }
.bt figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem .85rem;
  background: linear-gradient(to top, rgba(26,26,24,.85), transparent);
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s var(--ease);
}
.bt:hover figcaption, .bt:focus-visible figcaption { opacity: 1; transform: none; }
.bt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.bt-play {
  position: absolute; top: .8rem; right: .8rem;
  font-size: .55rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(26,26,24,.55); padding: .3rem .55rem;
  pointer-events: none;
}
/* placeholder shown only while the file does not exist yet */
.bt.is-empty { cursor: default; background: repeating-linear-gradient(135deg, var(--gray) 0 14px, #e4e2dc 14px 15px); }
.bt.is-empty img, .bt.is-empty video, .bt.is-empty .bt-play { display: none; }
.bt.is-empty::after {
  content: attr(data-spec);
  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);
}
.bt.is-empty figcaption { opacity: 1; transform: none; background: none; color: var(--ink); }

@media (max-width: 1000px) {
  .bento { --cols: 6; }
  .bento-grid { grid-auto-rows: calc((var(--c) * 2 + var(--g)) * .75); }
  .bt, .bt--sq { grid-column: span 2; }
  .bt--hero { grid-column: span 4; }
  .bt--tall { grid-column: span 2; }
  .bt--wide { grid-column: span 4; }
  .bt--half { grid-column: span 3; }
  .bt--full { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento { --cols: 2; }
  .bento-grid { grid-auto-rows: calc(var(--c) * .75); }
  .bt, .bt--sq, .bt--tall { grid-column: span 1; }
  .bt--hero, .bt--wide, .bt--half, .bt--full { grid-column: span 2; }
  .bt--full img { object-fit: contain; background: #fff; }
  .bt figcaption { display: none; }   /* captions live in the lightbox on mobile */
  .bt--m-full { grid-column: span 2; }   /* use on one single tile if mobile leaves a gap */
}
@media (prefers-reduced-motion: reduce) {
  .bt { opacity: 1; transform: none; transition: none; }
  .bt img, .bt video { transition: none; }
}

/* ── Lightbox ─────────────────────────────────────────────── */
.blb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,17,15,.94);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.blb.open { opacity: 1; visibility: visible; }
.blb-media { max-width: min(92vw, 1600px); max-height: 82vh; }
.blb-media img, .blb-media video { max-width: 100%; max-height: 82vh; width: auto; height: auto; display: block; }
.blb-cap {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center;
  color: rgba(255,255,255,.8); font-size: .65rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.blb button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font: 300 2rem/1 var(--sans); padding: 1rem; opacity: .7; transition: opacity .2s, color .2s;
}
.blb button:hover { opacity: 1; color: var(--red); }
.blb-close { top: .6rem; right: .8rem; }
.blb-prev { left: .4rem; top: 50%; transform: translateY(-50%); }
.blb-next { right: .4rem; top: 50%; transform: translateY(-50%); }

/* ── Case narrative helpers ───────────────────────────────── */
.cs-pull {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  max-width: 22ch;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.cs-pull em { color: var(--red); font-style: normal; }
.todo { background: #fff3b0; color: #6b5a00; padding: 0 .25em; }