/* ==========================================================================
   WORK — case-study pages. Same system as the index, different rhythm:
   the index is a gallery, this is a document.
   ========================================================================== */

/* ══ PAGE WIPE (transition between pages) ═════════════════════════════════ */
.wipe{
  position:fixed; inset:0; z-index:7000;
  background:var(--ink);
  transform:scaleY(1); transform-origin:50% 0;
  pointer-events:none;
}
.wipe.is-out{ pointer-events:auto; }

/* ══ FOOTER ═══════════════════════════════════════════════════════════════ */
.is-work .foot{ padding-top:24px; }

/* ══ TITLE ════════════════════════════════════════════════════════════════ */
/* clears the fixed site header — the title must never run under the wordmark */
.cw-head{
  padding:calc(var(--head-h) + clamp(40px,9vh,110px)) var(--pad) clamp(30px,4.5vw,60px);
}
.cw-eyebrow{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:clamp(20px,3vw,36px);
}
.cw-eyebrow span{ color:var(--ink-28); margin:0 4px; }

.cw-title{ margin-bottom:clamp(28px,4vw,52px); }
.cw-title__l{
  display:block; overflow:hidden;
  font-family:var(--f-display);
  font-size:clamp(2.8rem,11.5vw,10rem);
  font-weight:700; font-stretch:110%;
  line-height:.84; letter-spacing:-.045em;
  text-transform:uppercase;
}
.cw-title__l:nth-child(2){ padding-left:6vw; }
.cw-title__l:nth-child(3){ padding-left:12vw; }

.cw-intro{
  max-width:44ch;
  font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.35; letter-spacing:-.024em;
}

/* ══ LEAD IMAGE ═══════════════════════════════════════════════════════════ */
.cw-lead{
  margin:0 var(--pad);
  background:var(--tint,var(--paper-2));
  padding:clamp(22px,3.4vw,64px);
  overflow:hidden;
}
/* screens are shown whole, so the plate takes the image's own proportions and
   is capped at the source width — never cropped, never upscaled */
.cw-lead__plate{
  position:relative;
  max-width:var(--maxw,100%);
  margin-inline:auto;
  overflow:hidden;
  background:#fff;
  box-shadow:0 26px 60px -26px rgba(16,35,27,.4), 0 3px 10px -3px rgba(16,35,27,.1);
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.cw-lead__plate img{
  width:100%; height:auto; display:block;
}

/* ══ FACTS ════════════════════════════════════════════════════════════════ */
.cw-facts{
  margin:clamp(34px,5vw,72px) var(--pad) 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut);
}
.cw-facts dt{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:7px;
}
.cw-facts dd{ margin:0; font-size:var(--t-meta); line-height:1.4; }

/* ══ TEXT BLOCKS ══════════════════════════════════════════════════════════ */
/* challenge and solution share one centred treatment — a left-set block next
   to a centred one read as inconsistent rather than as a deliberate "turn" */
.cw-block{
  padding:clamp(64px,10vh,150px) var(--pad) 0;
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut) var(--gut);
  align-items:start;
  justify-items:center; text-align:center;
}
.cw-block .lab{ grid-column:1 / 13; padding-top:0; }
.cw-block .cw-h{
  grid-column:3 / 11;
  font-family:var(--f-text);
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:400; line-height:1.1; letter-spacing:-.03em;
  text-align:center;
}
.cw-block .cw-p{
  grid-column:4 / 10;
  margin-top:clamp(18px,2.4vw,32px);
  margin-inline:auto;
  font-size:var(--t-body); line-height:1.6; color:var(--ink-70);
  text-align:center;
}

/* ══ MEDIA ════════════════════════════════════════════════════════════════ */
/* one screen per row, each shown in full */
.cw-media{
  padding:clamp(56px,9vh,130px) var(--pad) 0;
  display:flex; flex-direction:column;
  gap:clamp(28px,4vw,64px);
}
.cw-fig__mat{
  background:var(--tint,var(--paper-2));
  padding:clamp(18px,2.6vw,48px);
  overflow:hidden;
}
.cw-fig__plate{
  position:relative;
  max-width:var(--maxw,100%);
  margin-inline:auto;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 48px -22px rgba(16,35,27,.36), 0 3px 10px -3px rgba(16,35,27,.1);
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.cw-fig__plate img{
  width:100%; height:auto; display:block;
}

/* ══ RESULTS ══════════════════════════════════════════════════════════════ */
.cw-results{
  padding:clamp(64px,10vh,150px) var(--pad) clamp(60px,9vh,120px);
}
.cw-results .lab{ margin-bottom:20px; }
.cw-results .res{ margin-top:0; }

/* ══ NEXT PROJECT ═════════════════════════════════════════════════════════ */
.cw-next{
  display:block;
  padding:clamp(50px,8vh,110px) var(--pad) clamp(56px,9vh,120px);
  border-top:1px solid var(--line);
  background:var(--paper);
  cursor:none;
  transition:background-color .6s var(--e-brand);
}
.cw-next:hover{ background:var(--ink); }
.cw-next__lab,.cw-next__meta{
  display:block;
  font-size:var(--t-meta); color:var(--ink-45);
  transition:color .6s var(--e-brand);
}
.cw-next__lab span,.cw-next__meta span{ color:var(--ink-28); margin:0 5px; }
.cw-next__name{
  display:block; position:relative; overflow:hidden;
  margin:clamp(12px,1.6vw,22px) 0;
  font-family:var(--f-display);
  font-size:clamp(2.2rem,8vw,7rem);
  font-weight:700; font-stretch:108%;
  line-height:.92; letter-spacing:-.04em;
  text-transform:uppercase;
  transition:color .6s var(--e-brand);
}
/* the name swaps for its own duplicate on hover — a clean vertical roll */
.cw-next__in{
  display:block;
  transition:transform .72s var(--e-brand);
}
.cw-next__in--dup{ position:absolute; inset:0; transform:translate3d(0,100%,0); }
.cw-next:hover .cw-next__in{ transform:translate3d(0,-100%,0); }
.cw-next:hover .cw-next__in--dup{ transform:translate3d(0,0,0); }
.cw-next:hover .cw-next__name{ color:var(--paper); }
.cw-next:hover .cw-next__lab,
.cw-next:hover .cw-next__meta{ color:rgba(242,240,235,.6); }


/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .cw-block .cw-h{ grid-column:2 / 12; }
  .cw-block .cw-p{ grid-column:3 / 11; }
  .cw-fig--half{ grid-column:1 / 13; }
}

@media (max-width:860px){
  .cw-head{ padding-top:calc(var(--head-h) + 40px); }
  .cw-title__l{ font-size:clamp(2.4rem,13vw,4.6rem); }
  .cw-title__l:nth-child(2){ padding-left:4vw; }
  .cw-title__l:nth-child(3){ padding-left:8vw; }
  .cw-intro{ max-width:none; font-size:1.05rem; }

  .cw-facts{ grid-template-columns:repeat(2,1fr); row-gap:22px; }

  /* narrow screens go back to left-set: centred multi-line body copy is
     harder to scan once the measure gets this tight */
  .cw-block{ row-gap:14px; }
  .cw-block .lab{ grid-column:1 / 13; padding-top:0; text-align:center; }
  .cw-block .cw-h{ grid-column:1 / 13; font-size:1.5rem; }
  .cw-block .cw-p{ grid-column:1 / 13; margin-inline:auto; }

  .cw-fig__mat{ padding:14px; }

  .cw-next{ cursor:auto; }
  .cw-next__name{ font-size:clamp(2rem,11vw,3.4rem); }

  /* the site header hides its meta on small screens; keep the counter */
  .site-head .sep{ display:none; }
}