/* ==========================================================================
   Case studies — shared layout for every piece of client work.

   Built entirely on the existing tokens (--ink, --cream, --brass, --slate,
   --font-display, --s*) so a case study reads as part of the site rather than a
   microsite bolted onto it. No new colours are introduced.
   ========================================================================== */

/* ---- Shared type ---- */
.cs-h2 { font-family: var(--font-display); font-weight: 740; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.08; margin: 0 0 var(--s5); }
.cs-h2--light { color: var(--cream); }
.cs-p { font-size: clamp(1rem, .97rem + .2vw, 1.12rem); line-height: 1.72; margin: 0 0 var(--s5); max-width: 62ch; }
.cs-p--light { color: color-mix(in srgb, var(--cream) 84%, transparent); }
.cs-eyebrow { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem; color: var(--brass); margin: 0 0 var(--s3); font-weight: 600; }

/* ---- Hero ---- */
.cs-hero { padding-block: clamp(var(--s7), 6vw, var(--s9)) var(--s8); }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center; }
.cs-hero__eyebrow { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem; color: var(--slate); margin: 0 0 var(--s4); font-weight: 600; }
.cs-dot { opacity: .5; }
.cs-hero__h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); line-height: 1.02; margin: 0 0 var(--s5); }
.cs-hero__stand { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.6;
  color: var(--slate); margin: 0 0 var(--s6); max-width: 58ch; }
.cs-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin: 0; }
.cs-hero__shot img { width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }

/* "Live" pill — the single strongest signal on the page: this is real and running. */
.cs-live { display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--brass) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 42%, transparent);
  border-radius: var(--radius-pill); padding: .35rem .8rem; }
.cs-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #3FB984);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #3FB984) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .cs-live__dot { animation: cs-pulse 2.4s ease-in-out infinite; }
  @keyframes cs-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success, #3FB984) 0%, transparent); } }
}

/* ---- Stats band ---- */
.cs-stats { background: var(--ink); color: var(--cream); padding-block: var(--s7); }
.cs-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.cs-stat { text-align: center; }
.cs-stat__n { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1; color: var(--brass-bright);
  letter-spacing: -.03em; }
.cs-stat__l { display: block; margin-top: var(--s3); font-size: .92rem; line-height: 1.4;
  color: color-mix(in srgb, var(--cream) 76%, transparent); }

/* ---- Two-column prose ---- */
.cs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s6), 5vw, var(--s8)); }

/* ---- Pull quote ---- */
.cs-quote { background: var(--cream); padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.cs-quote blockquote { margin: 0; text-align: center; }
.cs-quote p { font-family: var(--font-display); font-weight: 740; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem); line-height: 1.2; margin: 0 0 var(--s5); }
.cs-quote p::before, .cs-quote p::after { content: '\201C'; color: var(--brass); }
.cs-quote p::after { content: '\201D'; }
.cs-quote cite { font-style: normal; font-family: var(--font-cond); text-transform: uppercase;
  letter-spacing: .12em; font-size: .82rem; color: var(--slate); }

/* ---- Chapters ---- */
.cs-chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--s6), 4vw, var(--s8)); align-items: center; }
/* Alternate sides so a long case study never reads as one repeated block. */
.cs-chapter__grid.is-flipped { direction: rtl; }
.cs-chapter__grid.is-flipped > * { direction: ltr; }
.cs-figure { margin: 0; }
.cs-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cs-figure figcaption { margin-top: var(--s4); font-size: .88rem; line-height: 1.5;
  color: var(--slate); }
.cs-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cs-points li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 1rem; line-height: 1.5; }

/* ---- Design system ---- */
.cs-system .cs-p--light { max-width: 66ch; }
.cs-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5);
  margin-top: var(--s7); }
.cs-swatch { display: flex; flex-direction: column; gap: var(--s2); }
.cs-swatch__chip { display: block; height: 92px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); }
.cs-swatch__name { font-size: .9rem; color: var(--cream); }
.cs-swatch__hex { font-family: var(--font-mono, ui-monospace, monospace); font-size: .76rem;
  color: color-mix(in srgb, var(--cream) 62%, transparent); letter-spacing: .04em; }
.cs-type { margin-top: var(--s7); display: grid; gap: var(--s4); }
.cs-type__row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s5);
  align-items: baseline; padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); }
.cs-type__face { font-family: var(--font-display); font-weight: 740;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); color: var(--cream); letter-spacing: -.02em; }
.cs-type__role { font-size: .95rem; line-height: 1.5; color: color-mix(in srgb, var(--cream) 74%, transparent); }

/* ---- Archive ---- */
.cs-archive-hero { padding-block: clamp(var(--s7), 6vw, var(--s9)) var(--s7); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(var(--s5), 3vw, var(--s7)); }

.case-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .28s ease, box-shadow .28s ease; }
@media (prefers-reduced-motion: no-preference) {
  .case-card:hover, .case-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-float); }
}
.case-card__shot { display: block; overflow: hidden; background: var(--cream); }
.case-card__shot img { width: 100%; height: auto; display: block; }
.case-card__body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); }
.case-card__meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .76rem; color: var(--slate); font-weight: 600; }
.case-card__live { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); }
.case-card__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); line-height: 1.1; }
.case-card__sum { font-size: .98rem; line-height: 1.6; color: var(--slate); }
.case-card__more { margin-top: var(--s2); font-weight: 600; color: var(--brass); font-size: .95rem; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .cs-hero__grid, .cs-chapter__grid { grid-template-columns: 1fr; }
  /* Flipping only makes sense side by side; stacked, the image must follow its copy. */
  .cs-chapter__grid.is-flipped { direction: ltr; }
  .cs-two { grid-template-columns: 1fr; }
  .cs-swatches { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (max-width: 720px) {
  .cs-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .cs-type__row { grid-template-columns: 1fr; gap: var(--s2); }
}

/* Keep each eyebrow item and its leading separator together on one line. */
.cs-eyebrow__item { white-space: nowrap; }
.cs-hero__eyebrow .cs-dot { opacity: .5; }

/* ==========================================================================
   THE FOLIO — scroll-driven page-turn narrative.

   The case study reads as a bound document: each chapter is a leaf hinged at the
   spine that swings flat as you reach it, numbered like folios, with a binding rail
   tracking progress down the side.

   Three deliberate constraints:

   1. NO SCROLL HIJACKING. The theme already decided against it (motion.js keeps Lenis
      to the homepage because it caused scroll lag). This is scroll-DRIVEN, not
      scroll-controlled: the reader's scroll never stops behaving like scroll.
   2. COMPOSITOR ONLY. Every animated property is transform or opacity, so the page
      turns run off the main thread even with large images in view.
   3. CONTENT FIRST. All of this is gated behind .js and prefers-reduced-motion. With
      JavaScript off or motion reduced, the leaves are simply flat, readable pages.
   ========================================================================== */

/* Paper: a barely-there warm grain so the leaves read as stock rather than screen. */
.cs { position: relative; }
.cs-chapter { position: relative; perspective: 1800px; perspective-origin: 50% 40%; }

/* The leaf. transform-origin sits on the spine edge, and alternates with the layout
   so odd chapters hinge from the left and even ones from the right. */
.cs-leaf { transform-origin: left center; will-change: transform, opacity; }
.cs-leaf.is-flipped { transform-origin: right center; }

/* Gutter shadow: the soft crease near the spine, strongest mid-turn. */
.cs-leaf::before {
  content: ""; position: absolute; inset-block: -6%; width: 90px; left: -46px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(21,24,27,.16), transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease, ease);
}
.cs-leaf.is-flipped::before { left: auto; right: -46px; }

/* Folio numeral — the chapter number, set like a page mark in the margin. */
.cs-folio {
  font-family: var(--font-cond); font-weight: 600; letter-spacing: .18em;
  font-size: .78rem; text-transform: uppercase; color: var(--brass);
  display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4);
}
.cs-folio__rule { flex: 1 1 auto; height: 1px; max-width: 84px;
  background: linear-gradient(90deg, currentColor, transparent); opacity: .5; }

/* Binding rail — a fixed spine showing progress through the chapters. Desktop only:
   on a phone it would compete with the content for a narrow viewport. */
.cs-spine { display: none; }
@media (min-width: 1180px) {
  .cs-spine { display: block; position: fixed; left: clamp(18px, 2.4vw, 40px); top: 50%;
    transform: translateY(-50%); z-index: 20; pointer-events: none; }
  .cs-spine__track { position: relative; width: 2px; height: min(46vh, 380px);
    background: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 2px; overflow: hidden; }
  .cs-spine__fill { position: absolute; inset: 0; background: var(--brass);
    transform: scaleY(0); transform-origin: top; transition: transform .12s linear; }
  .cs-spine__label { margin-top: var(--s3); font-family: var(--font-cond);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
    writing-mode: vertical-rl; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The turn is driven by IntersectionObserver (case-motion.js) rather than a CSS
     scroll timeline.

     A native animation-timeline: view() version was built first and abandoned: the
     feature reports as supported, but with `both` fill and no duration a timeline that
     fails to attach collapses into an instantly-completed animation, leaving every leaf
     permanently flat. Measured across seven scroll positions, no leaf ever left its end
     state. This path is verifiable, works in every engine, and costs one observer. */
  .js .cs-leaf {
    opacity: 0;
    transform: rotateY(-14deg) translateZ(-52px);
    transition: transform 1s cubic-bezier(.22,.75,.24,1), opacity .75s ease;
  }
  .js .cs-leaf.is-flipped { transform: rotateY(14deg) translateZ(-52px); }
  .js .cs-leaf.is-turned,
  .js .cs-leaf.is-flipped.is-turned { opacity: 1; transform: none; }
  .js .cs-leaf.is-turned::before { opacity: 0; }
  /* The crease is strongest before the leaf settles. */
  .js .cs-leaf::before { opacity: .85; }
}