/* Project pages (Setu first): builds on ../home/home.css (nav, footer, cursor, transition).

   Told as a quick pitch: the product and its impact first, then the research, insights, and
   testing that got there. Impact and insights are the loudest things on the page.

   Type scale, applied strictly:
   Display (title) · Impact/insight figures (brand colour, oversized) · H2 (section headlines)
   · H3 (takeaway) · H4 (feature, insight, and row titles) · Body/LG (intros)
   · Body/MD (supporting text) · Label (labels and small numbers).
   Space: 128px between sections · 48px between blocks · 16px heading → text. */

:root {
  --pj-figure: clamp(56px, 6.2vw, 88px);
}

/* Each project page takes its own colour in place of the site blue (Solace's lives in
   solace.css). --pj-brand-light is the same colour lightened for text on dark photos. */
.setu {
  --color-bg-brand: #e2672a; /* Setu orange, from the logo */
  --color-bg-brand-hover: #c9561c;
  --color-bg-brand-subtle: #fdf0e8;
  --color-text-brand: #c2531a; /* a shade deeper so it reads as text */
  --color-border-brand: #e2672a;
  --color-icon-brand: #e2672a;
  --pj-brand-light: #f39a66;
}

.cnn {
  --color-bg-brand: #e50f23; /* CNN GenNow red */
  --color-bg-brand-hover: #c70d1e;
  --color-bg-brand-subtle: #fdecee;
  --color-text-brand: #cc0a1b;
  --color-border-brand: #e50f23;
  --color-icon-brand: #e50f23;
  --pj-brand-light: #ff6b77;
}

main {
  padding-top: calc(var(--layout-nav-height) + var(--space-8xl));
}

main em {
  font-style: normal;
  color: var(--color-text-brand);
}

/* ---------- Awards: a dark band under the overview on award-winning projects ---------- */
.pj-awards {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-2xl);
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--space-3xl);
  border-radius: var(--radius-xl);
  background: #1b1e24;
  color: #e9edf5;
}

.pj-awards__mark {
  flex: none;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--pj-brand-light, #8fb2f2);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pj-awards p {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.pj-awards__link {
  flex: none;
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand);
  color: #f9f9f9;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.pj-awards__link:hover {
  background: var(--color-bg-brand-hover);
  transform: translateY(-2px);
}

.pj-awards strong {
  color: var(--pj-brand-light, #8fb2f2);
  font-weight: 600;
}

/* ---------- Type ---------- */
.pj-display {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(44px, 6.7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pj-h2,
.pj-h3,
.pj-h4 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
}

.pj-h2 {
  max-width: 22ch;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: -0.015em;
}

/* Headings meant to sit on one line where the screen allows. */
.pj-h2--line {
  max-width: none;
}

/* A hair tighter, for a one-line heading that only just overflows. */
.pj-h2--tight {
  letter-spacing: -0.022em;
}

.pj-h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: -0.01em;
}

.pj-h4 {
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
  text-wrap: balance; /* no single word left alone on the last line */
  overflow-wrap: break-word;
  hyphens: auto; /* a long word breaks with a hyphen instead of spilling out of its card */
}

.pj-lg {
  max-width: 62ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  text-wrap: pretty; /* no single word left alone on the last line */
}

/* Intros meant to run margin to margin. */
.pj-lg--wide {
  max-width: none;
}

.pj-label,
.pj-eyebrow,
.pj-pitch__tag,
.pj-insight__tag,
.pj-feature__num,
.pj-meta dt {
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */
.pj-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

/* The opening speaks the same language as the home page: a mid-size headline with one
   phrase in brand colour, the project's disciplines as outlined pills (like the Work
   filters), and the details as a quiet list (like the home "experience" list). */
.pj-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5xl);
}

.pj-intro__main {
  display: grid;
  gap: var(--space-2xl);
  max-width: 760px;
}

.pj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-tags li {
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-width-thin) solid var(--color-border-inverse);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  white-space: nowrap;
}

.pj-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pj-title em {
  color: var(--color-text-brand);
  font-style: normal;
}

.pj-facts {
  display: grid;
  gap: 19px;
  flex: none;
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: normal;
}

.pj-facts > div {
  display: grid;
  grid-template-columns: 5.5em auto;
  align-items: baseline;
  gap: var(--space-2xl);
}

.pj-facts dt {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.pj-facts dd {
  margin: 0;
}

.pj-facts dd span {
  color: var(--color-text-brand);
}

.pj-cover {
  margin: var(--space-2xl) 0 0;
}

.pj-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* ---------- Sections ---------- */
.pj-sec {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
  margin-top: var(--space-9xl);
  scroll-margin-top: calc(var(--layout-nav-height) + 64px);
}

.pj-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pj-head .pj-label {
  color: var(--color-text-brand);
}

.pj-head--center {
  align-items: center;
  text-align: center;
}

/* ---------- 01 In 30 seconds ---------- */
.pj-sec#pitch {
  gap: var(--space-2xl);
}

.pj-pitch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.pj-pitch > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.pj-pitch__text {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

/* Impact is the one that stands out. */
.pj-pitch > .pj-pitch__impact {
  background: var(--color-bg-brand);
  color: var(--color-neutral-50);
}

.pj-pitch__impact .pj-pitch__tag {
  color: color-mix(in srgb, var(--color-neutral-50) 80%, transparent);
}

/* ---------- 02 The product (Figma: showcase strip, then a laptop tour) ---------- */
/* A continuous row of screens scrolling behind the laptop, held inside the page margins
   (Figma: 432×270 tiles, 100 apart, behind a 670×410 laptop, in a 1344-wide frame). */
.pj-showcase {
  --tile: calc(100cqw * 432 / 1344);
  --gap: calc(100cqw * 100 / 1344);
  container-type: inline-size;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.pj-showcase__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;
  animation: pj-marquee 90s linear infinite;
}

.pj-showcase__row {
  display: flex;
  gap: var(--gap);
  padding-right: var(--gap);
}

.pj-showcase__row img {
  display: block;
  width: var(--tile);
  height: auto;
  aspect-ratio: 432 / 270;
}

.pj-showcase__laptop {
  position: relative;
  display: block;
  margin: 0 auto;
  width: calc(100cqw * 670 / 1344);
  height: auto;
}

/* Duo (CNN): two laptop mosaics side by side, sharing one height. */
.pj-duo {
  display: grid;
  grid-template-columns: 1342fr 1391fr; /* each image's width ÷ height, so both share one height */
  gap: 0;
  margin: 0;
}

.pj-duo img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes pj-marquee {
  to { transform: translateX(-50%); }
}

.pj-photo img,
.pj-photo img,
.pj-ending img,
.pj-art img {
  display: block;
  width: 100%;
  height: auto;
}

.pj-tour {
  display: flex;
  flex-direction: column;
  gap: var(--space-10xl);
  margin-top: var(--space-5xl);
}

/* Laptop on one side, text on the other; every other row flips. */
.pj-stop {
  display: grid;
  grid-template-columns: minmax(0, 726fr) minmax(0, 519fr);
  gap: var(--space-6xl);
  align-items: center;
}

.pj-stop--flip {
  grid-template-columns: minmax(0, 519fr) minmax(0, 726fr);
}

.pj-stop--flip .pj-laptop {
  order: 2;
}

.pj-stop__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pj-stop__tag {
  margin: 0;
  color: var(--color-text-brand);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* The walkthrough video plays inside the laptop's screen (screen area of the Figma mockup). */
.pj-laptop {
  position: relative;
}

.pj-laptop img {
  display: block;
  width: 100%;
  height: auto;
}

.pj-laptop video {
  position: absolute;
  /* The recordings carry black bars on their left and right (64px of 1280 each side). The
     video is widened so the app itself spans the laptop screen edge to edge, and the bars are
     clipped off. Screen area: left 13.52%, top 6.37%, width 72.9%, height 77.75%. */
  left: 9.47%;
  top: 6.37%;
  width: 81%;
  height: 77.75%;
  object-fit: fill;
  clip-path: inset(0 5%);
  background: var(--color-neutral-950);
}

/* Wide recordings (CNN, 16:9 with black bars on every side): the app area is fitted to the
   screen's height and centred, and the bars outside the screen are clipped. The side gaps
   left over are black, like the bezel. */
.pj-laptop.pj-laptop--wide video {
  left: 8.75%;
  top: 3.38%;
  width: 82.5%;
  height: 80.77%;
  clip-path: inset(3.7% 5.78% 0 5.78%);
}

/* ---------- 03 Impact: the loudest numbers on the page ---------- */
/* Two-column split used by Impact, Insight → feature, and Learnings. */
.pj-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6xl);
  align-items: center;
}

.pj-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
}

.pj-split--learn {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.pj-photo,
.pj-art {
  margin: 0;
}

.pj-photo img {
  border-radius: var(--radius-xl);
}

.pj-impact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin: 0;
}

.pj-impact > div {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-top: var(--space-2xl);
  border-top: 2px solid var(--color-border-brand);
}

.pj-impact dt {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--pj-figure, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.pj-impact dd {
  margin: 0;
  max-width: 26ch;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* ---------- 04 Research highlights ---------- */
.pj-stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column; /* one equal column per stat, however many there are */
  gap: var(--space-2xl);
  margin: 0;
}

.pj-stats > div {
  padding-top: var(--space-lg);
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-stats dt {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: -0.02em;
}

.pj-stats dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* ---------- Context (CNN): a big statement beside the background that explains it ---------- */
.pj-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5xl);
  align-items: start;
}

.pj-context__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(48px, 6.7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.pj-context em {
  font-style: normal;
  color: var(--color-text-brand);
}

.pj-context__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-2xl);
}

.pj-context__text p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.pj-context__text .pj-context__lead {
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

/* Points earned by a feature (CNN product rows): a small brand-colour pill under its description. */
.pj-stop__points {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* Research (CNN): the headline stat as a big brand-colour card, beside the rest of the numbers as a
   clean list (primary and secondary research together). */
.pj-research {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-3xl);
  align-items: stretch;
}

.pj-research .pj-insight--hero {
  min-height: 0;
}

.pj-statlist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-statlist div {
  display: grid;
  grid-template-columns: calc(var(--type-h3-size) * 3) minmax(0, 1fr); /* fits ">70%" */
  gap: var(--space-xl);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.pj-statlist dt {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: 1;
  letter-spacing: -0.02em;
}

.pj-statlist dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* Key insights (CNN): four numbered rows with thin dividers. */
.pj-keyrows {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pj-keyrows ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-keyrows li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: baseline;
  padding: var(--space-2xl) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.pj-keyrows li span {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
}

.pj-keyrows h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
}

.pj-keyrows p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* Persona (CNN): her cut-out photo beside who she is and what she said. */
.pj-persona {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-brand-subtle);
}

.pj-persona__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}

.pj-persona__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pj-persona__quote {
  margin: 0;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* Text-only findings: a bold name over one line. */
.pj-finding.pj-finding--text {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-xs);
  text-align: left;
}

.pj-finding--text strong {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.pj-finding--text span {
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* Research insights: the headline stat runs down the left; the college insight and the four
   things reviewers flagged sit beside it. */
.pj-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: var(--space-lg);
}

.pj-mosaic .pj-insight--hero {
  grid-row: span 2;
  min-height: 420px;
}

.pj-mosaic .pj-insight:not(.pj-insight--hero),
.pj-mosaic .pj-persona,
.pj-findings {
  grid-column: span 2;
}

.pj-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-finding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  text-align: center;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.pj-finding__icon {
  width: auto;
  height: 36px;
  color: var(--color-text-brand);
}

.pj-insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-brand-subtle);
}

.pj-insight--hero {
  justify-content: flex-end;
  background: var(--color-bg-brand);
  color: var(--color-neutral-50);
}

.pj-insight__tag {
  color: var(--color-text-brand);
}

.pj-insight--hero .pj-insight__tag {
  margin-bottom: auto;
  color: color-mix(in srgb, var(--color-neutral-50) 80%, transparent);
}

.pj-insight__big {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.pj-insight__text {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.pj-insight__src {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.pj-takeaway {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-left: var(--space-3xl);
  border-left: 3px solid var(--color-border-brand);
}

.pj-takeaway .pj-label {
  color: var(--color-text-brand);
}

/* ---------- 05 From insight to feature ---------- */
/* Three columns: the question we heard, the feature that answers it, and that screen. */
.pj-hmws {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-hmw {
  /* Rows line up across the three cards: number, question, feature, screen. */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: var(--space-lg);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.pj-hmw__num {
  margin: 0;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-body-md-size);
  line-height: 1;
}

.pj-hmw__q {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.pj-hmw__q span {
  color: var(--color-text-primary);
}

/* The answer: a brand-colour arrow down into the feature name. */
.pj-hmw__a {
  margin: 0;
  padding-top: var(--space-lg);
  border-top: var(--border-width-thin) solid var(--color-border-default);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.pj-hmw__a::before {
  content: "↓";
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-brand);
}

.pj-hmw__a em {
  font-style: normal;
  color: var(--color-text-brand);
}

.pj-hmw img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- 06 Testing & iteration ---------- */
/* Fidelity reel (a cousin of the About moodboard): the section sticks while scrolling down
   glides the screens sideways, sketch → lo-fi → mid-fi → hi-fi. Giant ghost words drift slower
   than the screens, shots wipe up as they arrive, and a meter along the bottom fills as you go. */
.reel {
  --stage-h: calc(100svh - var(--layout-nav-height));
  position: relative;
  height: 400vh; /* replaced by the real journey length in project.js */
  margin-inline: calc(var(--page-margin) * -1);
}

.reel__stage {
  position: sticky;
  top: var(--layout-nav-height);
  height: var(--stage-h);
  overflow: hidden;
}

/* Units come from a 900-tall board, scaled to the stage height. */
.reel__track {
  --u: calc((var(--stage-h) - 72px) / 900);
  display: flex;
  width: max-content;
  height: calc(100% - 72px);
  padding-inline: var(--page-margin);
  will-change: transform;
}

.reel__phase {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(28 * var(--u));
  padding: calc(110 * var(--u)) calc(200 * var(--u)) 0 0; /* clear of the section bar */
}

.reel__phase:last-child {
  padding-right: 0;
}

/* Every stage is at least as wide as its ghost word, so the words never run into each other. */
.reel__phase {
  min-width: calc(1800 * var(--u));
}

.reel__word {
  position: absolute;
  z-index: 0;
  left: calc(-20 * var(--u));
  bottom: calc(-40 * var(--u));
  margin: 0;
  color: var(--color-bg-secondary);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: calc(320 * var(--u));
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.reel__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: none;
  width: max(calc(300 * var(--u)), 240px);
}

.reel__text p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.reel__text .reel__num {
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
}

.reel__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  flex: none;
  margin-top: calc(var(--o) * var(--u));
}

/* Each shot wipes up into view while settling from a slight zoom. */
.reel__shot {
  display: block;
  width: auto;
  max-width: none;
  height: calc(var(--h) * var(--u));
  border-radius: max(8px, calc(14 * var(--u)));
  box-shadow: 0 0 0 1px var(--color-border-default);
  background: var(--color-bg-primary);
  clip-path: inset(100% 0 0 0 round max(8px, calc(14 * var(--u))));
  transition: clip-path 1.1s var(--ease-morph);
}

/* Shots that are objects (like a laptop) rather than flat screens: no frame. */
.reel__shot--bare {
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.reel__shot.is-in {
  clip-path: inset(0 0 0 0 round max(8px, calc(14 * var(--u))));
}

/* Fidelity meter: a line that fills as you travel, with the four stages on it. */
.reel__meter {
  position: absolute;
  left: var(--page-margin);
  right: var(--page-margin);
  bottom: var(--space-xl);
}

.reel__bar {
  height: 2px;
  background: var(--color-border-default);
}

.reel__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-bg-brand);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

.reel__stops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  transition: color 0.3s ease;
}

.reel__stops li {
  transition: color 0.3s ease;
}

.reel__stops li span {
  color: inherit;
  font-family: var(--font-family-display);
  font-weight: 600;
}

.reel__stops li.is-active {
  color: var(--color-text-primary);
}

.reel__stops li.is-active span {
  color: var(--color-text-brand);
}

/* Iterations after testing: a carousel, one screen per slide, before on the left and after on
   the right, with what changed written over each photo (as in the original wireframe). */
.pj-iterhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-5xl);
}

.pj-iterhead .pj-lg {
  max-width: none;
  margin: 0;
  color: var(--color-text-secondary);
}

.pj-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}

.pj-carousel__track::-webkit-scrollbar {
  display: none;
}

.pj-slide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.pj-slide__half {
  position: relative;
  margin: 0;
}

.pj-slide__half img {
  display: block;
  width: 100%;
  height: auto;
}

/* The photos don't change with the theme, so neither does the text on them. */
.pj-slide__half figcaption {
  position: absolute;
  top: 7%;
  left: 26%;
  right: 6%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-neutral-900);
}

.pj-slide__half--after figcaption {
  color: var(--color-neutral-100);
}

.pj-slide__tag {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.pj-slide__half ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.pj-slide__half li::marker {
  color: currentColor;
}

.pj-slide__half--after li::marker,
.pj-slide__half strong {
  color: var(--pj-brand-light, var(--color-blue-400));
  font-weight: 600;
}

/* Bands variant (CNN): each half is a note on a band above its photo. Both halves share one
   band colour, and the bands share one height (subgrid), so the two photos always start level. */
.pj-carousel--bands .pj-slide {
  grid-template-rows: auto auto;
  column-gap: var(--space-xs);
}

.pj-carousel--bands .pj-slide__half {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.pj-carousel--bands .pj-slide__half figcaption {
  position: static;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.pj-carousel--bands .pj-slide__half img {
  grid-row: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pj-carousel--bands .pj-slide__tag {
  font-family: inherit;
  font-weight: 500;
  font-size: var(--type-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.pj-carousel--bands .pj-slide__half--light .pj-slide__tag {
  color: var(--color-text-brand);
}

.pj-slide__title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.pj-carousel--bands figcaption p:last-child {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.pj-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.pj-carousel__dots {
  display: flex;
  gap: var(--space-md);
}

.pj-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pj-carousel__dot[aria-current="true"] {
  background: var(--color-bg-brand);
  transform: scale(1.15);
}

.pj-carousel__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: 50%;
  background: none;
  color: var(--color-text-primary);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pj-carousel__arrow:hover {
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}

.pj-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 07 Learnings ---------- */
/* Three cards from the original wireframe: the challenge, then what it taught me. Rows line up
   across the cards: number, title, challenge, lesson. */
.pj-learns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-learn {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: var(--space-lg);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.pj-learn__num {
  margin: 0;
  color: var(--color-text-brand);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-body-md-size);
  line-height: 1;
}

.pj-learn__part {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pj-learn__part p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

.pj-learn__part .pj-learn__tag {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* The lesson is the point: set apart by a rule, in the primary text colour. */
.pj-learn__part--lesson {
  padding-top: var(--space-lg);
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-learn__part--lesson .pj-learn__tag {
  color: var(--color-text-brand);
}

.pj-learn__part--lesson p:last-child {
  color: var(--color-text-primary);
}

.pj-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-rows li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-2xl) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.pj-rows li > span {
  padding-top: 10px;
  color: var(--color-text-brand);
  font-weight: 500;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line-height);
}

.pj-rows li > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 820px;
}

.pj-rows p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* ---------- Ending + process book ---------- */
.pj-ending {
  margin: 0;
}

.pj-ending img {
  border-radius: var(--radius-xl);
}

.pj-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6xl);
  align-items: center;
}

.pj-book img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.pj-book .button {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* ---------- Next ---------- */
.pj-next {
  gap: var(--space-lg);
  margin-bottom: var(--layout-section-gap);
  padding-top: var(--space-3xl);
  border-top: var(--border-width-thin) solid var(--color-border-default);
}

.pj-next a {
  transition: color 0.2s ease;
}

.pj-next a:hover {
  color: var(--color-text-brand);
}

/* ---------- Sticky section bar (appears after the hero) ---------- */
.pj-bar {
  position: fixed;
  z-index: 9;
  top: var(--layout-nav-height);
  left: 0;
  right: 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
  background: var(--color-bg-primary);
  translate: 0 -100%;
  opacity: 0;
  transition: translate 0.35s var(--ease-morph), opacity 0.25s ease;
  pointer-events: none;
}

.pj-bar.is-shown {
  translate: 0 0;
  opacity: 1;
  pointer-events: auto;
}

.pj-bar__inner {
  position: relative;
}

.pj-bar__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.pj-bar__num,
.pj-bar__list span {
  color: var(--color-text-brand);
  font-size: var(--type-label-size);
}

.pj-bar__toggle svg {
  transition: rotate 0.2s ease;
}

.pj-bar__toggle[aria-expanded="true"] svg {
  rotate: 180deg;
}

.pj-bar__list {
  position: absolute;
  top: 100%;
  left: var(--page-margin);
  min-width: 280px;
  margin: 0;
  padding: var(--space-sm) 0;
  list-style: none;
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-neutral-950) 8%, transparent);
}

.pj-bar__list a {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xl);
}

.pj-bar__list a:hover,
.pj-bar__list a.is-active {
  color: var(--color-text-brand);
}

/* ---------- Gentle reveal on scroll ---------- */
.has-js .pj-reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.9s var(--ease-morph), translate 1s var(--ease-morph);
}

.has-js .pj-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .pj-showcase__track {
    animation: none;
  }

  .pj-carousel__track {
    scroll-behavior: auto;
  }


  .reel__shot {
    transition: none;
  }

  .has-js .pj-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  /* Narrower screens: the details drop under the headline. */
  .pj-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xl);
  }

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

  .pj-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .pj-split,
  .pj-split--learn,
  .pj-stop,
  .pj-stop--flip,
  .pj-book {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .pj-stop--flip .pj-laptop {
    order: 0;
  }

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

  .pj-carousel--bands .pj-slide {
    grid-template-rows: none;
    row-gap: var(--space-xs);
  }

  .pj-carousel--bands .pj-slide__half {
    display: flex;
    flex-direction: column;
  }

  .pj-carousel--bands .pj-slide__half.pj-slide__half figcaption {
    background: var(--color-bg-secondary);
  }

  /* Phones: no pinning; the reel is a plain sideways swipe. */
  .reel {
    --stage-h: 520px;
    height: auto;
  }

  .reel__stage {
    position: static;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reel__track {
    --u: calc(var(--stage-h) / 900);
    height: 100%;
    transform: none !important;
  }

  .reel__word,
  .reel__meter {
    display: none;
  }

  .reel__shot {
    clip-path: none;
  }

  /* Too narrow to write over the photo: the notes sit above it on a band of the same tone. */
  .pj-slide__half {
    display: flex;
    flex-direction: column;
  }

  .pj-slide__half figcaption {
    position: static;
    order: -1;
    padding: var(--space-2xl) var(--space-2xl) var(--space-lg);
    background: var(--color-neutral-200);
  }

  .pj-slide__half--after figcaption {
    background: var(--color-neutral-900);
  }

  .pj-art {
    max-width: 520px;
  }
}

@media (max-width: 767px) {
  main {
    padding-top: calc(var(--layout-nav-height) + var(--space-5xl));
  }

  .pj-showcase {
    --tile: 56cqw;
    --gap: 8cqw;
  }

  .pj-showcase__laptop {
    width: 88cqw;
  }

  .pj-sec {
    margin-top: var(--space-8xl);
    gap: var(--space-3xl);
  }

  .pj-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xl);
  }

  .pj-facts {
    font-size: var(--type-body-md-size);
    gap: var(--space-md);
  }

  .pj-mosaic,
  .pj-hmws,
  .pj-learns {
    grid-template-columns: minmax(0, 1fr);
  }

  .pj-learns {
    row-gap: var(--space-lg);
  }


  .pj-persona,
  .pj-context,
  .pj-research {
    grid-template-columns: minmax(0, 1fr);
  }

  .pj-keyrows li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-xs) var(--space-md);
  }

  .pj-keyrows li p {
    grid-column: 2;
  }

  .pj-context {
    gap: var(--space-xl);
  }

  .pj-context__text {
    padding-top: 0;
  }

  .pj-findings:has(.pj-finding--text) {
    grid-template-columns: minmax(0, 1fr);
  }

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


  .pj-hmws {
    row-gap: var(--space-lg);
  }

  .pj-mosaic .pj-insight--hero {
    grid-row: auto;
    min-height: 0;
  }

  .pj-mosaic .pj-insight:not(.pj-insight--hero),
  .pj-mosaic .pj-persona,
  .pj-findings {
    grid-column: auto;
  }

  .pj-tour {
    gap: var(--space-8xl);
  }

  .pj-impact > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .pj-pitch > div,
  .pj-insight {
    padding: var(--space-2xl);
  }

  .pj-takeaway {
    padding-left: var(--space-xl);
  }

  .pj-rows li {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}