/* ==========================================================================
   CBC — Case Study Premium Template (production)
   Promoted from mockups/case-study-premium-template. Loaded only by the true
   case-study pages under /insights/. Every selector is namespaced .csp*, so
   nothing here changes styling on any other page.

   The page borrows only tokens from tokens.css: no new colour, no new face,
   no new type step invented here. Rust and slate stay the only accents, the
   two rust surfaces used are the approved --gradient-hero band and the rust
   hairline rule.

   Order of the file:
     1  page-level helpers
     2  opening masthead
     3  metric ledger band
     4  chapter navigator
     5  chapter frame (rail + column)
     6  chapter content parts (lede, prose, lists, quotes)
     7  responsive
     8  reduced motion / forced colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE-LEVEL HELPERS
   -------------------------------------------------------------------------- */

/* Anchor targets clear both the fixed site bar and the sticky navigator. */
.csp-ch {
  scroll-margin-top: calc(var(--header-height) + 4.25rem);
}

/* Smooth anchor travel is an enhancement, never a requirement. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.csp-open) {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------------------------
   2. OPENING MASTHEAD
   The live case study runs the photograph full-bleed behind a white headline.
   Here the type sits on the page's own white surface and the photograph is
   held to a plate beside it: the title is read first, the image supports it,
   and the same markup works for a case with a weaker photograph.
   -------------------------------------------------------------------------- */

.csp-open {
  position: relative;
  padding-top: calc(var(--header-height) + clamp(var(--space-8), 4vw, var(--space-16)));
  padding-bottom: clamp(var(--space-10), 4vw, var(--space-16));
  background: var(--color-bg);
}

.csp-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-8), 4.5vw, var(--space-20));
}

.csp-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps-sm);
  text-decoration: none;
  text-transform: uppercase;
}

.csp-back > span:first-child {
  color: var(--color-primary);
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  transition: transform var(--transition-interactive);
}

.csp-back:hover,
.csp-back:focus-visible {
  color: var(--color-primary);
}

.csp-back:hover > span:first-child,
.csp-back:focus-visible > span:first-child {
  transform: translateX(-0.2rem);
}

.csp-kicker {
  margin: 0 0 clamp(var(--space-5), 2vw, var(--space-7));
}

/* The headline is a sentence, so it is set in the display face at the page
   display step without the caps treatment the one- and two-word page titles
   use. Tight leading, negative tracking, reading measure held at ~24ch so a
   long title breaks into three or four even lines instead of one long ribbon. */
.csp-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(2rem, 1.15rem + 2.7vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--color-text);
  text-wrap: pretty;
}

/* The metadata ledger. Three rows of label-over-value, divided by hairlines,
   so the reader knows the industry and the capability before the narrative
   starts. Rows are the only place in the opening that carries a link. */
.csp-meta {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(var(--space-7), 3vw, var(--space-10)) 0 0;
  border-top: 1px solid var(--color-divider);
}

.csp-meta__row {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-5) var(--space-6) 0 0;
}

.csp-meta__row + .csp-meta__row {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-divider);
}

.csp-meta dt {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.csp-meta dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.csp-meta dd a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-tint);
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}

.csp-meta dd a:hover,
.csp-meta dd a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* The plate. One square-edged image, framed rather than bled. */
.csp-plate {
  margin: 0;
}

.csp-plate__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

/* A hairline inside the frame keeps the photograph from floating on white. */
.csp-plate__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 1px solid rgb(0 0 0 / 0.08);
  pointer-events: none;
}

[data-theme='dark'] .csp-plate__frame::after {
  border-color: rgb(255 255 255 / 0.1);
}

.csp-plate__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The closing tag band sits directly under the last chapter, so it takes the
   page's base surface rather than the shared offset grey — two grey bands
   against each other lost the section break the hairline is there to make.
   Scoped to this page by the .csp-related class on that one section. */
.csp-related {
  background: var(--color-bg);
}

/* The deck's rust rule, closing the masthead. */
.csp-rule {
  display: block;
  height: var(--rule-height);
  margin-top: clamp(var(--space-10), 4vw, var(--space-16));
  background: var(--gradient-hero);
}

/* --------------------------------------------------------------------------
   3. METRIC LEDGER BAND
   The three verified figures on the approved rust surface, which is fixed in
   both themes and always carries white type. Nothing but numbers here — the
   band is the outcome stated before the story is told.
   -------------------------------------------------------------------------- */

.csp-ledger {
  background: var(--gradient-hero);
  padding-block: clamp(var(--space-8), 3.6vw, var(--space-12));
}

.csp-ledger__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.csp-ledger__item {
  padding-inline: clamp(var(--space-4), 2vw, var(--space-8));
  border-left: 1px solid rgb(255 255 255 / 0.22);
}

.csp-ledger__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.csp-ledger__v {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  text-wrap: nowrap;
  color: #ffffff;
}

.csp-ledger__l {
  margin: clamp(var(--space-4), 1.6vw, var(--space-5)) 0 0;
  max-width: 22ch;
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.78);
}

.csp-ledger__l span {
  display: block;
}

/* --------------------------------------------------------------------------
   4. CHAPTER NAVIGATOR
   A plain ordered list of in-page anchors. It sticks under the fixed bar on
   desktop and turns into a compact horizontally scrolling control on a phone.
   With JS off it is still a working table of contents; the script only adds
   the read-position state.
   -------------------------------------------------------------------------- */

.csp-chapters {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}

.csp-chapters__inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2.5vw, var(--space-10));
  min-height: 4.25rem;
}

.csp-chapters__label {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.csp-chapters__list {
  display: flex;
  align-items: stretch;
  gap: clamp(var(--space-4), 2vw, var(--space-8));
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.csp-chapters__a {
  position: relative;
  display: flex;
  align-items: baseline;
  padding-block: var(--space-4);
  text-decoration: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-interactive);
}

.csp-chapters__t {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  letter-spacing: -0.002em;
}

/* The read-position marker is a rust underline on the link itself, so the
   control never changes size as the state moves. */
.csp-chapters__a::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-interactive);
}

.csp-chapters__a:hover,
.csp-chapters__a:focus-visible {
  color: var(--color-text);
}

.csp-chapters__a[aria-current='true'] {
  color: var(--color-text);
}

.csp-chapters__a[aria-current='true']::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   5. CHAPTER FRAME
   Every chapter is the same two-part frame: a rail carrying the number and
   the heading, and a column carrying the argument. The rail is what makes the
   four-part structure legible at a glance; the column is where the
   composition changes from one chapter to the next.
   -------------------------------------------------------------------------- */

.csp-ch {
  padding-block: clamp(var(--space-10), 4.75vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider);
}

.csp-ch--light {
  background: var(--color-bg);
}

.csp-ch--offset {
  background: var(--color-surface-2);
}

.csp-ch__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-16));
  align-items: start;
}

.csp-ch__rail {
  position: sticky;
  top: calc(var(--header-height) + 6.5rem);
}

.csp-ch__num {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: 3.5rem;
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.csp-ch__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-xl), 2.1vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
  text-wrap: balance;
}

/* The related insight row: square-edged cards on the page's own base surface.
   The shared .artmore band is grey (--color-surface-2); on a case study that
   grey stacked against the tag band above it and read as a second footer, so
   the row takes --color-bg in light mode and the matching base surface in dark
   mode. Scoped to .csp-more, so the shared card component and every other page
   that uses .artmore are untouched. */
.csp-more {
  background: var(--color-bg);
}

.csp-more .icard {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   6. CHAPTER CONTENT PARTS
   -------------------------------------------------------------------------- */

/* The summary is the one paragraph on the page set above body size, because
   it is the whole case in three sentences. */
.csp-lede {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.55vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: pretty;
}

@supports (font-variation-settings: 'wght' 250) {
  .csp-lede {
    font-family: 'SwitzerVF', var(--font-display);
    font-variation-settings: 'wght' 280;
  }
}

.csp-p {
  margin: clamp(var(--space-6), 2.4vw, var(--space-8)) 0 0;
  max-width: 68ch;
  font-size: clamp(var(--text-base), 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: var(--color-text);
}

.csp-p--open {
  margin-top: 0;
}

/* A small caps label opening a ledger, with the rust tick that tells the eye
   a list is starting rather than another paragraph. */
.csp-ch__caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: clamp(var(--space-8), 3.4vw, var(--space-12)) 0 var(--space-5);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.csp-ch__caption::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  background: var(--color-primary);
}

/* Condition ledger — hairline rows in two columns. Not cards: a card per
   bullet would put six boxes on the page and flatten the hierarchy. */
.csp-ledgerlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-divider);
}

.csp-ledgerlist li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: clamp(var(--text-sm), 1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-text);
}

/* Approach steps — numbered, because the order in which the team worked is
   part of the argument. Counters keep the numbering out of the markup. */
.csp-steps {
  margin: 0;
  padding: 0;
  max-width: 68ch;
  list-style: none;
  counter-reset: csp-step;
}

.csp-steps li {
  counter-increment: csp-step;
  position: relative;
  padding: var(--space-4) 0 var(--space-4) clamp(2.75rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-divider);
  font-size: clamp(var(--text-sm), 1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-text);
}

.csp-steps li:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.csp-steps li::before {
  content: '0' counter(csp-step);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps-sm);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Outcomes — the one list on the page allowed to sit at reading size with a
   rust keyline, because these are the results. */
.csp-outcomes {
  margin: 0;
  padding: 0;
  max-width: 68ch;
  list-style: none;
}

.csp-outcomes li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) clamp(var(--space-5), 2vw, var(--space-7));
  border-top: 1px solid var(--color-divider);
  font-size: clamp(var(--text-base), 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text);
}

.csp-outcomes li:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.csp-outcomes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-4) + 0.6em);
  width: 0.6rem;
  height: 2px;
  background: var(--color-primary);
}

/* The pull quote. One sentence, lifted out of the narrative rather than
   repeated from it, set in the display face against a rust keyline. */
.csp-quote {
  margin: clamp(var(--space-8), 3.4vw, var(--space-12)) 0 0;
  padding-left: clamp(var(--space-5), 2vw, var(--space-7));
  border-left: 2px solid var(--color-primary);
  max-width: 46ch;
}

.csp-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(var(--text-lg), 1.9vw, 1.875rem);
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--color-text);
  text-wrap: pretty;
}

/* When the quote leads the chapter it sits tighter to the paragraph above. */
.csp-quote--lead {
  margin-top: clamp(var(--space-6), 2.6vw, var(--space-8));
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet and small laptop: the rail stops being sticky before it starts
   competing with the sticky navigator for vertical room. */
@media (max-width: 1080px) {
  .csp-ch__inner {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .csp-open__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--space-7), 4vw, var(--space-10));
  }

  .csp-title {
    max-width: 30ch;
  }

  .csp-plate__img {
    aspect-ratio: 16 / 9;
  }

  .csp-ch__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--space-5), 3vw, var(--space-7));
  }

  .csp-ch__rail {
    position: static;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }

  .csp-ch__num {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    max-width: none;
  }

  .csp-ledgerlist {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone: the navigator drops its label and scrolls inside its own track. The
   scroll lives on the list, never on the document. */
@media (max-width: 780px) {
  .csp-chapters__inner {
    display: block;
    min-height: 0;
    padding-inline: 0;
  }

  .csp-chapters__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .csp-chapters__list {
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: max(var(--space-4), var(--gutter));
  }

  .csp-chapters__list::-webkit-scrollbar {
    display: none;
  }

  /* The track has no scrollbar, so the edge that can still be scrolled is
     faded instead. The state attribute is set by the page script; with JS off
     there is no fade and the track still scrolls. */
  .csp-chapters[data-csp-track='start'] .csp-chapters__list {
    mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
  }

  .csp-chapters[data-csp-track='middle'] .csp-chapters__list {
    mask-image: linear-gradient(90deg, transparent 0%, #000 8% 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8% 92%, transparent 100%);
  }

  .csp-chapters[data-csp-track='end'] .csp-chapters__list {
    mask-image: linear-gradient(90deg, transparent 0%, #000 8% 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8% 100%);
  }

  .csp-chapters__a {
    min-height: 3rem;
    padding-block: var(--space-3);
  }

  .csp-ledger__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .csp-ledger__item {
    padding-inline: 0;
    padding-block: var(--space-6);
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.22);
  }

  .csp-ledger__item:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .csp-ledger__item:last-child {
    padding-bottom: 0;
  }

  .csp-meta {
    display: block;
  }

  .csp-meta__row {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .csp-meta__row + .csp-meta__row {
    padding-left: 0;
    border-left: 0;
  }

  .csp-meta__row:last-child {
    border-bottom: 0;
  }
}

/* Narrow phone: the display steps come in one notch so a long title and a
   long metric never set a line wider than the viewport. */
@media (max-width: 380px) {
  .csp-title {
    font-size: 1.8125rem;
  }

  .csp-ledger__v {
    font-size: 2.25rem;
  }

  .csp-quote p {
    font-size: var(--text-lg);
  }
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION / FORCED COLORS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .csp-chapters__a,
  .csp-chapters__a::after,
  .csp-back > span:first-child,
  .csp-meta dd a {
    transition: none;
  }
}

@media (forced-colors: active) {
  .csp-chapters__a[aria-current='true']::after {
    background: Highlight;
  }

  .csp-plate__frame::after {
    border-color: CanvasText;
  }
}