/* ══════════════════════════════════════════════════════════════════════
   casestudy.css — the six case studies (Tofha, MOFAD, Ghoom Gali, RAAH,
   MagicSlides, NBA). Loaded after style.css.

   These components used to be copied into an inline <style> on each page,
   and the copies had drifted apart. This is the one version. A page's own
   <style> now holds only what is genuinely unique to it (a client's
   swatches, type specimens, one-off grids).

   Page shell
     LEFT    cover image · caption · Contents (highlights the section in view)
     CENTRE  the intro sentence (the page's h1) · info box · the case study
     RIGHT   empty on purpose
   Below 900px the Contents list gives way to the sticky section strip.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Shell ══════════════════════════════════════════════════════════════ */

/* Left column: cover, caption, then Contents — top-aligned, and scrollable
   on short screens so a long Contents list never gets cut off. */
.col-left.cs-left {
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: none;
}
.col-left.cs-left::-webkit-scrollbar { display: none; }

.work-cover { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--placeholder); box-shadow: var(--shadow-1); }
.work-cover img { width: 100%; height: 100%; object-fit: cover; }
.work-cover-cat { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); }

body.has-project-nav .col-left,
body.has-project-nav .col-right { height: calc(100dvh - var(--nav-h) - var(--pnav-h)); }

.wd-center { padding: 0 var(--sp-10); }
.wd-sticky { position: sticky; top: var(--nav-h); z-index: var(--z-base); padding-top: var(--sp-8); background: var(--bg); }

/* The intro sentence — the page's one h1. Inherits the site's h1 rule
   (serif, Libre Baskerville) since this is the one true headline. */
.work-lede {
  font-size: var(--fs-h1);
  max-width: 44ch;
}

/* Metadata — Role · Also/Team · Timeline · Year, and the live link.
   Unboxed, sitting between the hero visual and the section nav. */
.cs-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-10);
  margin: var(--space-stack) 0 var(--sp-8);
}
.cs-info-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cs-info-item .label { line-height: 1; }
.cs-info-item span:last-child { font-size: var(--fs-md); line-height: var(--lh-ui); }
.cs-info-live { margin-left: auto; font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; }

/* The case study scrolls up over the sticky intro */
.work-visuals {
  position: relative;
  z-index: var(--z-raised);
  background: var(--bg);
  padding-top: var(--sp-6);
}

/* Contents — in the left column under the cover */
.cs-index { display: flex; flex-direction: column; margin-top: var(--sp-8); }
.cs-index .section-label { margin-bottom: var(--sp-2); }
.cs-index .grp { margin: var(--sp-4) 0 var(--sp-1); }
.cs-index a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--fs-md);
  color: var(--muted);
  transition: color var(--dur-hover) var(--ease);
}
.cs-index a::before {
  content: '\25C6';
  font-size: 0.6em;
  color: var(--accent-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.cs-index a:hover, .cs-index a.is-active { color: var(--text); }
.cs-index a.is-active::before { opacity: 1; transform: none; }

/* Section strip — stacked layouts only (≤900px) */
.cs-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  display: none;
  gap: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-3) 0 var(--sp-4);
  margin-bottom: var(--sp-6);
  background: var(--bg);
  font-size: var(--fs-md);
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 0 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 calc(100% - 56px), transparent 100%);
}
.cs-nav::-webkit-scrollbar { display: none; }
.cs-nav a { flex: 0 0 auto; color: var(--muted); transition: color var(--dur-hover) var(--ease); }
.cs-nav a:hover, .cs-nav a.is-active { color: var(--text); }

/* Prev / next project — fixed to the bottom of the viewport */
.project-navbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-pnav);
  height: var(--pnav-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--gutter);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.project-navbar a { display: block; min-width: 0; }
.project-navbar .work-nav-label { margin-bottom: var(--sp-1); line-height: 1; }
.work-nav-name {
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}
body.has-project-nav { padding-bottom: var(--pnav-h); }

/* ══ The repeating unit ═════════════════════════════════════════════════ */
.casestudy { color: var(--text); }

.cs-sec { padding: var(--space-block) 0; scroll-margin-top: calc(var(--nav-h) + var(--sp-6)); }
.cs-sec:first-of-type { padding-top: var(--sp-4); }
.cs-sec:last-of-type { padding-bottom: var(--sp-6); }

.cs-eyebrow { margin-bottom: var(--sp-4); }
.cs-sub { margin-top: var(--sp-16); }

.casestudy h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }

.cs-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); margin-top: var(--sp-5); }

/* ── Pillars — three (or two) cards ── */
.cs-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); margin-top: var(--space-stack); }
.cs-pillars.two { grid-template-columns: repeat(2, 1fr); }
.cs-pillar { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--pad-card); }
.cs-pillar .pn { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.cs-pillar h3 { font-size: var(--fs-h5); }
.cs-pillar p { margin-top: var(--sp-2); }
.cs-pillar ul { list-style: none; margin-top: var(--sp-3); line-height: var(--lh-body); }
.cs-pillar ul li + li { margin-top: var(--sp-1); }

/* ── Numbered items ── */
.cs-list { margin-top: var(--space-stack); }
.cs-item { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; align-items: baseline; }
.cs-item .n { font-size: var(--fs-sm); color: var(--muted); }
.cs-item h3 { font-size: var(--fs-h5); }
.cs-item p { margin-top: var(--sp-2); max-width: var(--measure); }

/* ── Label / detail rows ── */
.cs-rows { margin-top: var(--sp-8); }
.cs-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); padding: var(--sp-3) 0; align-items: baseline; border-top: 1px solid var(--line); }
.cs-row .rk { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.cs-row .rv-t { font-size: var(--fs-md); color: var(--muted); line-height: var(--lh-ui); }

/* ── A path, as a row of steps ── */
.cs-flow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); font-size: var(--fs-sm); }
.cs-flow .chip { background: var(--surface); box-shadow: var(--shadow-soft); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); }
.cs-flow .chip.key { background: var(--accent); color: var(--on-dark); font-weight: var(--fw-medium); }
.cs-flow .ar { color: var(--muted); }
.cs-flow-label { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-top: var(--sp-7); }
.cs-flow-label:first-child { margin-top: 0; }
.cs-flow-label + .cs-flow { margin-top: var(--sp-3); }
.cs-caption { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-4); max-width: var(--measure); }

/* ── Three ways in (Tofha): a switch on the left, its filters on the right ── */
.cs-axes { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--sp-2) var(--sp-8); margin-top: var(--space-stack); }
.cs-axis { display: grid; grid-template-columns: 192px 1fr; gap: var(--sp-6); padding: var(--sp-4) 0; align-items: start; }
.cs-axis + .cs-axis { border-top: 1px solid var(--line); }
.cs-axis .sw { display: inline-block; background: var(--accent); color: var(--on-dark); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }
.cs-axis .who { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); }
.cs-axis .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-1); }
.cs-axis .chips span { background: var(--bg); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }

/* ── Figures ── */
.casestudy figure { margin: var(--space-stack) 0 0; }
/* Hero visual — the first figure in .work-visuals, right after the heading.
   work-visuals already carries the top gap, so this figure needs none of
   its own. */
.wd-hero { margin-top: 0; }
.casestudy figure img,
.casestudy figure video { display: block; width: 100%; height: auto; background: var(--surface); box-shadow: var(--shadow-1); }
/* A loop can land on a fractional height and Chrome's video layer may round
   it short, letterboxing black along two edges. cover fills the box whatever
   the rounding; the clip shaves the last pixel in case the layer overhangs. */
.casestudy figure video { object-fit: cover; clip-path: inset(0 1px 1px 0); }
.casestudy figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); max-width: var(--measure); }
.casestudy figcaption .d { margin: 0 var(--sp-2); color: var(--accent-2); }
.casestudy figcaption .tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--f-serif);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  line-height: 1;
  color: var(--text);
}

.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-gap); margin-top: var(--space-stack); }
.cs-grid.three { grid-template-columns: repeat(3, 1fr); }
.casestudy .cs-grid figure { margin: 0; }
.cs-grid .tall { aspect-ratio: 3 / 4; object-fit: cover; }

/* ── Text beside a tall image ── */
.cs-split { display: grid; grid-template-columns: 0.8fr 1fr; gap: var(--sp-8); margin-top: var(--space-stack); align-items: start; }
.casestudy .cs-split figure { margin: 0; }
.cs-split .cs-body:first-child { margin-top: 0; }

/* ── Site map + flows side by side ── */
.cs-ia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--space-stack); align-items: start; }

/* ── Core flows (Tofha): phone loop left, the flow's steps right ── */
.cs-flowrow { margin-top: var(--space-stack); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-8); align-items: end; }
.casestudy .cs-flowrow figure { margin: 0; }
.cs-flowrow + .cs-flowrow { margin-top: var(--sp-20); }
.cs-flowtext { padding-bottom: var(--sp-2); }
.cs-flowname {
  font-family: var(--f-sans);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading-sans);
  margin-bottom: var(--sp-6);
}
.cs-flowtext .cs-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-6); }
.cs-flowtext .cs-steps .n { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.cs-flowtext h3 { font-size: var(--fs-h4); }
.cs-flowtext p { margin-top: var(--sp-2); max-width: 34ch; }

/* ── Palette swatches (content — the client's colours never theme the page) ── */
.cs-swatches { display: flex; gap: var(--sp-3); margin-top: var(--space-stack); }
.cs-swatch { flex: 1; }
.cs-swatch .chip { height: 64px; box-shadow: inset 0 0 0 1px var(--line); }
.cs-swatch .hex { font-size: var(--fs-sm); margin-top: var(--sp-3); }
.cs-swatch .nm { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }

/* ── Stats row ── */
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-gap); margin-top: var(--space-stack); }
.cs-stat { border-top: 1px solid var(--line-strong); padding-top: var(--sp-4); }
.cs-stat .n {
  font-family: var(--f-serif);
  font-weight: var(--hd-weight);
  letter-spacing: var(--ls-heading);
  font-size: var(--fs-h2);
  line-height: 1;
}
.cs-stat .l { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); }

/* ── Sitemap diagrams (inline SVG) ── */
.casestudy .dia { --dia-canvas: var(--surface); display: block; width: 100%; height: auto; }
.casestudy .dia-bg   { fill: var(--dia-canvas); }
.casestudy .dia-grid { fill: none; stroke: var(--muted); stroke-width: 0.5; opacity: 0.28; }
.casestudy .dia-node { fill: var(--bg); stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.casestudy .dia-root { stroke: var(--accent-2); }
.casestudy .dia-ln   { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.casestudy .dia-dm   { fill: var(--text); }
.casestudy .dia-t    { fill: var(--text); font-family: var(--f-sans); font-size: 12px; }
.casestudy .dia-t-root { font-weight: var(--fw-bold); }
.casestudy .dia-sub  { fill: var(--muted); }
.casestudy .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ══ Responsive ═════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .wd-center { padding: 0 var(--sp-6); }
  .cs-pillars { grid-template-columns: repeat(2, 1fr); }
  .cs-axis { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cs-ia { grid-template-columns: 1fr; }
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  body.has-project-nav .col-left,
  body.has-project-nav .col-right { height: auto; }
  .col-left.cs-left { overflow: visible; }
  .cs-left .cs-index { display: none; }       /* the strip takes over */
  .col-right.cs-right { display: none; }
  .cs-nav { display: flex; padding-block: 0; }
  /* The chips are 20px words; a 44px row gives each a full touch without
     making the strip any taller than its old padding did. */
  .cs-nav a { display: flex; align-items: center; min-height: var(--tap); }
  .cs-info-live { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* Top nav + section strip + this bar held ~20% of a phone screen at all
     times. main.js adds .is-tucked while scrolling down; it comes back on
     any scroll up and at the end of the page. */
  .project-navbar { transition: transform var(--dur-ui) var(--ease); }
  .project-navbar.is-tucked { transform: translateY(100%); }
  .wd-center { padding: 0 var(--gutter); }
  .wd-sticky { position: static; padding-top: var(--sp-2); }
  .cs-info-live { margin-left: 0; }
}

@media (max-width: 560px) {
  .cs-pillars, .cs-pillars.two { grid-template-columns: 1fr; }
  .cs-item { grid-template-columns: 1fr; gap: var(--sp-1); }
  .cs-row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-grid.three { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .cs-split { grid-template-columns: 1fr; }
  .cs-flowrow { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cs-flowrow + .cs-flowrow { margin-top: var(--sp-14); }
  .cs-swatches { flex-wrap: wrap; }
  .cs-swatch { flex: 1 1 28%; }
  .cs-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .cs-info-live { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-index a::before { transition: none; }
}