/* Satgana case study. Satgana's own palette, editorial register.
   One orchestrated moment on load, nothing else moves. */

:root {
  --green: #1e3a32; /* deep green, titles and primary text */
  --green-mid: #3f6b55; /* medium green, secondary */
  --sand: #e3dcc9;
  --cream: #f7f4ed; /* page background */
  --rose: #f4e4dc; /* callout fill */
  --terracotta: #b04a28; /* accent, numbers, callout left border */

  --wrap: 1080px;
  --wrap-narrow: 760px;
  --wrap-flow: 1240px; /* the graph on screen 3 runs wider than the prose */

  --title-hero: clamp(2.4rem, 5.4vw, 3.7rem);
  --title-section: clamp(2rem, 4vw, 2.85rem);
  /* The largest non-title type on the page. */
  --figure-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: Nunito, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- layout ---------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-narrow {
  max-width: calc(var(--wrap-narrow) + 56px);
}

.wrap-flow {
  max-width: calc(var(--wrap-flow) + 56px);
}

.section {
  padding: clamp(64px, 9vw, 118px) 0;
  border-top: 1px solid var(--sand);
}

/* ---------------- screen 1 ---------------- */

.hero {
  padding: clamp(72px, 13vh, 150px) 0 clamp(64px, 9vw, 118px);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.95rem;
  margin: 0 0 40px;
}

.eyebrow-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terracotta);
}

.byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  text-decoration: none;
}

.byline:hover {
  color: var(--terracotta);
}

.byline:hover .in-mark {
  fill: var(--terracotta);
}

.in-mark {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--green-mid);
}

.logo {
  width: 84px;
  height: 84px;
  margin: 0 0 34px;
}

.hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-hero);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--green);
  margin: 0;
  max-width: 15ch;
}

/* ---------------- headings ---------------- */

.section-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-section);
  line-height: 1.16;
  color: var(--green);
  margin: 0 0 clamp(30px, 4vw, 48px);
}

/* ---------------- bullets in running text ---------------- */

.bullets {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: 62ch;
}

.bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------------- screen 2 ---------------- */

.callout {
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  background: var(--rose);
  border-left: 4px solid var(--terracotta);
  padding: 28px 32px;
}

.callout-title {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.5em;
}

.callout p {
  max-width: 62ch;
}

/* ---------------- screen 3, the graph ----------------
   Four nodes read top to bottom. Phase 1 is a wide collection band, the
   connectors narrow it into phase 2, open it into phase 3, which is the
   widest block on the page and the only filled one, then fan it out into
   the three groups of phase 4. The shape carries the hierarchy, so it is
   readable before a single word is. */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step {
  width: 100%;
}

.step-collect,
.step-out {
  max-width: 1040px;
}

.step-neck {
  max-width: 620px;
}

.step-pivot {
  max-width: var(--wrap-flow);
  background: var(--rose);
  border-left: 4px solid var(--terracotta);
  padding: clamp(34px, 4vw, 52px) clamp(26px, 3.4vw, 56px);
}

.flow-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--green);
  margin: 0 0 22px;
  text-align: center;
}

.step-out .flow-title {
  margin-bottom: 0;
}

.flow-title-pivot {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  margin-bottom: 18px;
}

/* Phase 2 was one block of prose. Four separated moves, one per line of
   reasoning, so the neck reads as a method rather than a paragraph. */
.moves {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: move;
}

.moves li {
  counter-increment: move;
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--sand);
  font-size: 0.99rem;
  line-height: 1.6;
}

.moves li:last-child {
  border-bottom: 1px solid var(--sand);
}

.moves li::before {
  content: counter(move);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--terracotta);
}

.tag {
  font-weight: 700;
  color: var(--terracotta);
}

.step-pivot p {
  font-size: 1.06rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
}

/* The connectors. Right angles only: a bracket that gathers a whole band
   into one stem, the same bracket reversed to open onto the pivot, and a
   three way split for the deliverables. No curves, no arrowheads. */
.conn {
  display: block;
  width: 100%;
  height: 64px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1;
  opacity: 0.55;
}

.conn path {
  vector-effect: non-scaling-stroke;
}

.conn-short,
.conn-split {
  height: 44px;
}

/* The title of phase 4 sits between the two, so the split reads as the
   pivot naming production and production opening into three groups. */
.conn-split {
  margin-bottom: 8px;
}

.conn-tick {
  display: none;
}

/* phase 1, the corpus */
.corpus {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 22px;
  margin: 0 0 30px;
}

.corpus-item {
  border-top: 2px solid var(--terracotta);
  padding-top: 12px;
}

.corpus-num {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: var(--figure-size);
  line-height: 1.05;
  color: var(--terracotta);
  margin: 0 0 6px;
}

.corpus-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--green);
}

.num-inline {
  color: var(--terracotta);
  font-weight: 700;
}

.sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sources li {
  border-top: 1px solid var(--sand);
  padding-top: 11px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* The corpus, one dot per post. 5,314 from the ecosystem in green, then the
   521 portfolio posts in terracotta, so the smaller, closer set is the one
   that carries the accent. */
.field {
  margin: 34px 0 30px;
}

.field img {
  width: 100%;
  height: auto;
}

.field-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--green-mid);
}

.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.key::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.key-eco::before {
  background: var(--green-mid);
  opacity: 0.62;
}

.key-pf::before {
  background: var(--terracotta);
}

.field-note {
  font-style: italic;
}

/* The distribution behind the choice of the median. Bars are the 5,314 posts
   in bands of ten interactions up to 300, the tail runs to 33,542 and is left
   off the axis rather than flattening everything else. */
.dist {
  /* Pulled back under the list number, so the chart gets the full width of
     the neck rather than sitting inside the text indent. */
  margin: 22px 0 4px -44px;
}

.dist-plot {
  position: relative;
  padding-top: 22px;
  padding-bottom: 20px;
}

.chart-dist {
  display: block;
  width: 100%;
  height: 132px;
  overflow: visible;
}

.chart-dist .bars rect {
  fill: var(--green-mid);
  opacity: 0.45;
}

.chart-dist .axis {
  stroke: var(--sand);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-dist .mark {
  stroke: var(--terracotta);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-dist .mark-mean {
  stroke-dasharray: 3 3;
}

.dist-mark {
  position: absolute;
  top: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--terracotta);
  white-space: nowrap;
  transform: translateX(-2px);
}

/* Pinned to the same x as the two rules drawn in the chart. */
.dist-median {
  left: 12.3%;
}

.dist-mean {
  left: 44%;
}

.dist-axis {
  position: absolute;
  bottom: 0;
  font-size: 0.76rem;
  color: var(--green-mid);
}

.dist-axis-min {
  left: 0;
}

.dist-axis-max {
  right: 0;
}

.dist figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* phase 3, the six parts of the platform */
.platform {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.platform li {
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.95rem;
  color: var(--terracotta);
  background: rgba(255, 255, 255, 0.35);
}

/* phase 4 */
.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
}

.deliverable-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
  text-align: center;
}

.deliverable ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deliverable li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  color: var(--green);
  font-size: 0.99rem;
  line-height: 1.55;
}

.deliverable li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* The artefacts. Served small and, where they carry Satgana's own figures,
   blurred at the source, so the strip proves the work exists without
   publishing what is in it. */
.artefacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin: 46px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--sand);
}

.artefact img {
  width: 100%;
  /* One ratio for all five, so the strip stays a grid whatever the shape of
     the artefact. Anchored to the top, which is where a document identifies
     itself. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--sand);
}

.artefact figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--green-mid);
}

/* ---------------- screen 4 ---------------- */

.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(34px, 4.5vw, 54px) clamp(36px, 5vw, 64px);
}

.outcome-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
}

.outcome p {
  color: var(--green);
  max-width: 58ch;
}

.outcome-adoption {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.rate {
  color: var(--terracotta);
  font-weight: 700;
}

.offsite {
  margin: 0;
}

.offsite img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 42%;
}

.offsite figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* ---------------- the quote ---------------- */

.quote-band {
  background: var(--sand);
  padding: clamp(54px, 7vw, 92px) 0;
}

.quote {
  margin: 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.quote-face {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.quote blockquote {
  margin: 0 0 20px;
}

.quote blockquote p {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.42;
  color: var(--green);
  margin: 0;
  max-width: 30ch;
}

.quote figcaption {
  display: flex;
  flex-direction: column;
}

.quote-name {
  font-weight: 700;
  color: var(--green);
}

.quote-role {
  font-size: 0.95rem;
  color: var(--green-mid);
}

/* ---------------- screen 5 ---------------- */

.section-close {
  padding-bottom: clamp(72px, 10vw, 130px);
}

.close-label {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 8px;
}

.close-line {
  color: var(--green-mid);
  margin: 0 0 clamp(34px, 4.5vw, 52px);
  max-width: 52ch;
}

.contact-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 6px;
}

.contact p:last-child {
  margin: 0;
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .corpus {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 880px) {
  .deliverables,
  .sources {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .outcomes,
  .outcome-adoption {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  /* Every step is the same width on a phone, so the brackets would be a lie.
     They give way to a plain vertical tick between the nodes. */
  .conn {
    height: 34px;
  }

  .conn-bracket {
    display: none;
  }

  .conn-tick {
    display: block;
  }

  .corpus {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }

  .artefacts {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-dist {
    height: 110px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .callout,
  .step-pivot {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* The pivot keeps its extra width on a phone by running to both edges,
     while every other step stays inside the text column. */
  .step-pivot {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .hero-title {
    max-width: none;
  }

  .quote {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 420px) {
  .corpus {
    grid-template-columns: 1fr;
  }
}

/* ---------------- the one orchestrated moment ----------------
   Screen 1 settles once on load. Nothing else on the page moves.
   Only applies when the inline head script has set .js, so a page
   without JavaScript is simply there, fully visible, at rest. */

.js .reveal {
  opacity: 0;
  animation: rise 620ms cubic-bezier(0.22, 0.68, 0.26, 1) forwards;
}

.js .reveal:nth-child(1) {
  animation-delay: 40ms;
}
.js .reveal:nth-child(2) {
  animation-delay: 160ms;
}
.js .reveal:nth-child(3) {
  animation-delay: 280ms;
}
.js .reveal:nth-child(4) {
  animation-delay: 400ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media print {
  .js .reveal {
    opacity: 1;
    animation: none;
  }
}