/* ===========================================================================
   impact.css · Impact index
   Structural clone of bond.krd/projects
   Spec: docs/research/pages/work/ (TOPOLOGY.md, tokens.md, BEHAVIORS.md,
   components/PageTitle|FilterRail|ProjectGrid|ProjectCard.spec.md)
   Everything is scoped under main.p-work.

   The source drives every dimension off a fluid root font-size
   (100vw/412*16 below 640, 100vw/768*16 at 640-1023, 100vw/1440*16 at 1024+)
   with --spacing:.0625rem, so a utility like "pt-312" is 312 root units.
   styles.css owns :root, so this page carries its own unit token --u and
   writes every length as calc(N * var(--u)), where N is the px value at 1440.
   At 1440 --u = 1px, the source design width.
   =========================================================================== */

main.p-work{
  --u: calc(100vw / 412);
  --gap: calc(10 * var(--u));
  --pad: calc(15 * var(--u));
  --cols: 6;
  display: block;
  position: relative;
  overflow-x: clip;
  background: var(--paper);
  color: var(--teal);
}
@media (min-width: 640px){
  main.p-work{ --u: calc(100vw / 768); --gap: calc(12.5 * var(--u)); }
}
@media (min-width: 1024px){
  main.p-work{ --u: calc(100vw / 1440); --gap: calc(15 * var(--u)); --cols: 12; }
}

/* --- the one section: page grid + gutters (source .px-15 .my-grid) ------- */
main.p-work section.wk{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: calc(148 * var(--u)) var(--pad) calc(100 * var(--u));
}
@media (min-width: 1024px){
  main.p-work section.wk{
    padding-top: calc(312 * var(--u));
    padding-bottom: calc(200 * var(--u));
  }
}

.p-work a{ color: inherit; text-decoration: none; }
.p-work p{ margin: 0; }
.p-work ul{ list-style: none; margin: 0; padding: 0; }

/* SplitText holders start hidden so the line mask has something to reveal */
body.gsap .p-work .sp{ opacity: 0; }
body.gsap .p-work .wk-count{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  body.gsap .p-work .sp,
  body.gsap .p-work .wk-count{ opacity: 1 !important; }
  .p-work .wk-rule i{ transform: none !important; }
}
body:not(.gsap) .p-work .wk-rule i{ transform: none; }

/* =========================================================================
   1 · PAGE TITLE   (source: h1.page-title + its hairline rule)
   ========================================================================= */
.p-work .wk-head{
  grid-column: 1 / -1;
  display: block;
}
@media (min-width: 1024px){
  .p-work .wk-head{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
}

.p-work .wk-h1{
  display: flex;
  align-items: flex-start;
  justify-self: start;
  margin: 0;
  grid-column: 1 / 8;
}
.p-work .page-title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(52 * var(--u));
  line-height: 1;
  /* Instrument Sans sets wider than PP Neue Montreal; pulled back to hold the box */
  letter-spacing: -.025em;
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-work .page-title{ font-size: calc(160 * var(--u)); line-height: .9375; }
}
.p-work .wk-h1-t{ display: block; }
.p-work .wk-count{
  flex: none;
  align-self: flex-start;
  margin-left: calc(20 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: .06em;
  top: 0;
  vertical-align: baseline;
}

.p-work .wk-lede{
  grid-column: 8 / 13;
  max-width: 40ch;
  margin-top: calc(24 * var(--u));
}
@media (min-width: 1024px){
  .p-work .wk-lede{ margin-top: 0; margin-bottom: calc(10 * var(--u)); }
}
.p-work .page-text{
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-work .page-text{ font-size: calc(30 * var(--u)); }
}

/* the hairline under the title: 1px, translateY(.5px), scaleX from the left */
.p-work .wk-rule{
  grid-column: 1 / -1;
  height: 1px;
  margin-top: calc(10 * var(--u));
  margin-bottom: calc(30 * var(--u));
  transform: translateY(.5px);
  pointer-events: none;
}
@media (min-width: 1024px){
  .p-work .wk-rule{ margin-top: calc(40 * var(--u)); }
}
.p-work .wk-rule i{
  display: block;
  height: 1px;
  border-top: 1px solid var(--teal);
  transform-origin: left center;
  transform: scaleX(0);
}

/* the anonymity line: its own full-width row between the rule and the rail,
   so the sticky filter column keeps its tall cell (POSITIONING RULE 0a/0b) */
.p-work .wk-note{
  grid-column: 1 / -1;
  color: var(--teal);
  opacity: .55;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  margin-bottom: calc(26 * var(--u));
}
@media (min-width: 1024px){
  .p-work .wk-note{ margin-bottom: calc(34 * var(--u)); }
}

/* =========================================================================
   2 · FILTER RAIL   (static labels; sticky sidebar at 1024+)
   ========================================================================= */
.p-work .wk-rail{
  grid-column: 1 / -1;
}
@media (min-width: 1024px){
  .p-work .wk-rail{ grid-column: span 2 / span 2; }
}
.p-work .wk-rail-label{
  color: var(--teal);
  opacity: .5;
  font-size: calc(12 * var(--u));
  line-height: 1.33;
  margin-bottom: calc(12 * var(--u));
}
@media (min-width: 1024px){
  .p-work .wk-filters{ position: sticky; top: calc(100 * var(--u)); }
}
.p-work .wk-filter{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  color: var(--teal);
}
@media (min-width: 1024px){
  .p-work .wk-filter{ line-height: 1.3; }
}
.p-work .wk-filter.is-on{ opacity: .5; }

/* =========================================================================
   3 · PROJECT GRID
   ========================================================================= */
.p-work .wk-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: calc(74 * var(--u));
  margin-top: calc(50 * var(--u));
}
@media (min-width: 1024px){
  .p-work .wk-grid{
    grid-column: span 10 / span 10;
    row-gap: calc(100 * var(--u));
    margin-top: 0;
  }
}

/* below 1024 every card is a full-width row; the 4-track grid still exists */
.p-work .wk-card{ grid-column: 1 / -1; position: relative; }
@media (min-width: 1024px){
  .p-work .wk-card[data-span="1"]{ grid-column: span 1 / span 1; }
  .p-work .wk-card[data-span="2"]{ grid-column: span 2 / span 2; }
}

/* the element the parallax translates; the cell around it stretches to the row */
.p-work .wk-inner{ position: relative; will-change: transform; }

.p-work .wk-media{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 382 / 257;
  background: var(--paper);
}
.p-work .wk-media canvas{
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.p-work .js-btn{
  position: absolute; bottom: 0; right: 0; z-index: 3;
  width: calc(60 * var(--u)); height: calc(60 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--teal);
  transform-origin: bottom right;
  transform: scale(0);
  pointer-events: none;
}
.p-work .js-arrow{
  width: 53%; height: 53%;
  color: var(--teal);
  transform-origin: center;
  transform: scale(0);
}

/* The clone's card title is one short brand name at 36/.83. An anonymised
   name is a phrase ("Crude transport and fuel supply company") and wraps to
   three lines in a one-column card, so the one-column size drops to 28 and
   the line-height opens to .95. APPROX: the two-column card keeps 36. */
.p-work .wk-card-title{
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: calc(28 * var(--u));
  line-height: .95;
  color: var(--teal);
  margin-top: calc(20 * var(--u));
}
@media (min-width: 1024px){
  .p-work .wk-card[data-span="2"] .wk-card-title{ font-size: calc(36 * var(--u)); }
}
.p-work .wk-card-meta{
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
  /* source is 18px GT America Mono; Fragment Mono sets much wider, so the
     size is pulled to 15 to keep one line inside a 1-column card. APPROX. */
  font-size: calc(15 * var(--u));
  line-height: 1.67;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: calc(8 * var(--u));
}
.p-work .wk-card-head{
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: calc(17 * var(--u));
  line-height: 1.28;
  color: var(--teal);
  margin-top: calc(10 * var(--u));
  max-width: 36ch;
}

/* the whole card is one link */
.p-work .wk-hit{
  position: absolute; inset: 0; z-index: 4;
  cursor: pointer;
}
.p-work .wk-hit:focus-visible{ outline: 2px solid var(--teal); outline-offset: calc(4 * var(--u)); }

/* =========================================================================
   4 · CTA
   ========================================================================= */
.p-work .wk-cta{
  grid-column: 1 / -1;
  margin-top: calc(100 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: 1px solid var(--teal);
}
@media (min-width: 1024px){
  .p-work .wk-cta{ grid-column: 3 / 13; margin-top: calc(160 * var(--u)); }
}
.p-work .wk-cta-line{
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: calc(28 * var(--u));
  line-height: 1.1;
  color: var(--teal);
  max-width: 22ch;
}
@media (min-width: 1024px){
  .p-work .wk-cta-line{ font-size: calc(46 * var(--u)); max-width: 26ch; }
}
.p-work .wk-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(30 * var(--u));
  padding: calc(18 * var(--u)) calc(30 * var(--u));
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--paper);
  font-family: var(--mono);
  font-size: calc(14 * var(--u));
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.p-work .wk-btn-label{ position: relative; z-index: 2; }
.p-work .wk-btn-sweep{
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-deep);
  color: var(--paper);
  transform-origin: center bottom;
  transform: translateY(101%) scaleX(.5);
}

/* =========================================================================
   5 · THE DATA BOX   (scripts/build-impact.mjs)
   POSITIONING RULE 0b: no client names, no logos, no client photographs.
   The image plate is replaced by the study's numbers on a teal-deep plate.
   One value large in the sans numeral style, its label in mono under it,
   the remaining one or two stats as mono rows on hairlines, the core
   service as a mono chip in the top-left corner. The clone's hover still
   runs; what it reveals is the headline instead of a photograph.
   Every length is still calc(N * var(--u)), N = the px value at 1440.
   ========================================================================= */
.p-work .wk-box{
  --bpad: calc(16 * var(--u));
  --bval: calc(44 * var(--u));
  --blab: calc(11 * var(--u));
  --bhead: calc(21 * var(--u));
  background: var(--teal-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--bpad);
}
@media (min-width: 1024px){
  .p-work .wk-card[data-span="1"] .wk-box{
    --bpad: calc(15 * var(--u)); --bval: calc(38 * var(--u));
    --blab: calc(10 * var(--u)); --bhead: calc(19 * var(--u));
  }
  .p-work .wk-card[data-span="2"] .wk-box{
    --bpad: calc(26 * var(--u)); --bval: calc(76 * var(--u));
    --blab: calc(13 * var(--u)); --bhead: calc(30 * var(--u));
  }
}

.p-work .wk-box-chip{
  position: absolute; top: var(--bpad); left: var(--bpad); z-index: 2;
  font-size: var(--blab);
  line-height: 1;
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border: 1px solid color-mix(in srgb, var(--paper) 42%, transparent);
  color: var(--paper);
}

.p-work .wk-box-val{
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--bval);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.p-work .wk-box-lab{
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: var(--blab);
  line-height: 1.35;
  opacity: .82;
}

.p-work .wk-box-rows{ margin-top: calc(14 * var(--u)); }
.p-work .wk-box-rows li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  border-top: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
  padding: calc(7 * var(--u)) 0 calc(4 * var(--u));
  font-family: var(--mono);
  font-size: var(--blab);
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.p-work .wk-box-rows b{ font-weight: 400; flex: none; }
.p-work .wk-box-rows span{ opacity: .7; text-align: right; }

/* what the hover reveals, in place of the clone's photograph */
.p-work .wk-box-head{
  position: absolute; inset: 0; z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: var(--bpad);
  background: color-mix(in srgb, var(--teal-deep) 93%, transparent);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--bhead);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--paper);
  opacity: 0;
}
/* with GSAP off the reveal is a plain CSS hover */
body:not(.gsap) .p-work .wk-box-head{ transition: opacity .4s var(--e-out); }
body:not(.gsap) .p-work .wk-card:hover .wk-box-head{ opacity: 1; }