/* =============================================================================
   ReLeaf: the Integrated Human Practices page
   -----------------------------------------------------------------------------
   Sits on top of page.css and borrows every colour from tokens.css, the same
   way plant.css does. The page is a record of who we met and what changed, so
   its blocks are ruled records, paired before/after rows and galleries. Corners
   are square, nothing casts a shadow, and state is a stamp that names itself.
   The evolution map carries its own stylesheet (evomap.css). Each pipeline
   has a colour, and the same colour marks it wherever it is named.
   ========================================================================== */

/* ------------------------------------------------------------------ SHELL -- */

.ihp { --max: 1440px; --measure: 76ch; }

.ihp .pagebody { max-width: none; }
.ihp .pagebody .sec > p,
.ihp .pagebody .sec > ul,
.ihp .pagebody .sec > ol,
.ihp .pagebody .sec > h3,
.ihp .pagebody .sec > h4,
.ihp .pagebody .sec > .callout { max-width: var(--measure); }

.ihp .sec + .sec { margin-top: var(--sp-8); }
.ihp .sec > h3 { margin-top: var(--sp-7); }

.ihp .fig img, .ihp .callout, .ihp .tablewrap { border-radius: 0; }

/* --------------------------------------------------------------- CONTENTS -- */
/* Twelve entries, set tight enough that the whole list is on screen at
   1280x800 without a scrollbar of its own. */

@media (min-width: 1040px) {
  .ihp .toc { top: calc(var(--nav-h) + var(--sp-4)); }
  .ihp .toc__title { margin-bottom: var(--sp-2); }
}

/* ------------------------------------------------------------------- RAIL -- */
/* A tab strip over one panel: the pipelines, the return visits, the LINE menu. */

.rail { margin: var(--sp-6) 0; border: 1px solid var(--gray-300); }
.rail__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  /* the right-hand column's rule lands on the rail's own border, not beside it */
  margin-right: -1px;
}
.rail__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-right: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
  border-top: 2px solid transparent;
  background: var(--gray-50);
  color: var(--gray-600);
  font: inherit; text-align: left; cursor: pointer;
}
.rail__btn:hover { background: var(--leaf-50); color: var(--leaf-900); }
.rail__btn:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: -3px; }
.rail__btn[aria-selected="true"] { background: var(--white); border-top-color: var(--leaf-700); color: var(--leaf-900); }
.rail__no { font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.rail__btn[aria-selected="true"] .rail__no { color: var(--leaf-700); }
.rail__name { font-weight: 650; line-height: 1.25; font-size: var(--text-sm); }
.rail__when { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.rail__panel { padding: var(--sp-5); background: var(--white); }
.rail__panel[hidden] { display: none; }
.rail__panel h4 { margin: 0 0 var(--sp-2); color: var(--leaf-900); }
.rail__panel p { margin: 0 0 var(--sp-3); max-width: 84ch; }

/* ------------------------------------------------------------- PIPELINES -- */

.ihp {
  --pl-deploy:  #3f5468;
  --pl-plant:   #23684a;
  --pl-protect: #8a5a0b;
  --pl-circuit: #7a3b67;
  --pl-reactor: #1f5f8b;
  --pl-model:   #5a4c9c;
}
/* Section 3.1 is read like a set of short chapters. A segmented control
   (frosted, pinned under the site nav) picks the chapter; each chapter
   opens on a hero (what the part is for, who we asked, in what order),
   then one soft card per conversation, with the reason for the next one
   set quietly between them, and ends on a tinted conclusion. Softer than
   the rest of the page on purpose: rounded, one shadow, no rules.        */

.ihp { --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73; --well: #f5f5f7; --ease: cubic-bezier(.25, .8, .25, 1); }

.rail--pipe { margin: var(--sp-5) 0 0; border: 0; }

/* -- segmented control -- */
/* The control takes the page's banner colour, the one the contents rail
   uses (page.css --toc-ink): Wet Lab green unless the nav names another tab. */
body { --seg-ink: #417778; }
body:has(#site-nav[data-tab="project"])    { --seg-ink: #ba485f; }
body:has(#site-nav[data-tab="drylab"])     { --seg-ink: #327985; }
body:has(#site-nav[data-tab="engagement"]) { --seg-ink: #a85940; }
body:has(#site-nav[data-tab="team"])       { --seg-ink: #457b3a; }
.seg {
  position: sticky;
  top: calc(var(--nav-h) + .75rem);
  z-index: 6;
  display: flex;
  justify-content: center;
  margin: 0 0 var(--sp-7);
  pointer-events: none;
}
.seg__track {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1.5px var(--seg-ink), 0 8px 24px -14px rgb(0 0 0 / .3);
  pointer-events: auto;
}
.seg__track::-webkit-scrollbar { display: none; }
.seg__thumb {
  position: absolute;
  top: 5px; bottom: 5px; left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--seg-ink);
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / .18);
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.ihp .rail--pipe .seg__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9688rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.seg__ico { flex: none; width: 1.125rem; height: 1.125rem; color: var(--pl); opacity: .7; transition: opacity .25s ease, transform .3s var(--ease); }
.ihp .rail--pipe .seg__btn:hover { color: var(--seg-ink); background: none; }
.ihp .rail--pipe .seg__btn[aria-selected="true"] { color: #fff; font-weight: 600; }
.seg__btn[aria-selected="true"] .seg__ico { color: #fff; opacity: 1; transform: scale(1.08); }
.seg__btn:focus-visible { outline: 2px solid var(--seg-ink); outline-offset: 2px; }
/* without the script the active button carries its own fill */
.seg__track:not(.has-thumb) .seg__btn[aria-selected="true"] { background: var(--seg-ink); }

/* -- a chapter -- */
.rail--pipe > .rail__panel.pipe { padding: 0; background: none; scroll-margin-top: calc(var(--nav-h) + 5rem); }
.rail--pipe > .rail__panel.is-entering { animation: pipe-in .6s var(--ease) both; }
@keyframes pipe-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pipe__hero { margin: 0 0 var(--sp-7); text-align: center; }
.pipe__hero > .pipe__title:first-child { margin-top: 0; }
.pipe__eyebrow { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--pl); }
.ihp .pipe__title {
  margin: .35rem 0 0;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ink);
}
.pipe__intro { margin: var(--sp-5) 0 0; text-align: left; }
.ihp .rail__panel .pipe__intro p {
  margin: 0 auto var(--sp-3);
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: -.008em;
  color: var(--ink-2);
}
.pipe__count { margin: var(--sp-6) 0 var(--sp-3); font-size: .8125rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* who we asked, in order: a row of faces, each one a shortcut */
.ihp .cast {
  display: flex;
  justify-content: safe center;
  align-items: flex-start;
  gap: .25rem;
  margin: 0;
  padding: .25rem 0 .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}
.ihp .cast::-webkit-scrollbar { display: none; }
.ihp .cast > li, .ihp .cast > li + li, .ihp .chain > li, .ihp .chain > li + li { flex: none; margin: 0; }
.cast a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: 5.75rem;
  padding: .5rem .25rem;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.cast a:hover { background: var(--well); }
.cast__face {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--pl) 45%, transparent);
  transition: transform .3s var(--ease);
}
.cast a:hover .cast__face { transform: scale(1.06); }
.cast span { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.cast b { font-size: .75rem; font-weight: 600; letter-spacing: -.005em; }
.cast small { margin-top: .15rem; font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* the rephrased framing keeps the page's orange: it is Claude's wording */
html:not(.ai-off) .ihp .rail--pipe p.ai { color: var(--ai-ink); }

/* -- the cards -- */
.ihp .chain { list-style: none; margin: 0; padding: 0; }
.node { margin: 0; scroll-margin-top: calc(var(--nav-h) + 5.5rem); }
.card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: 28px;
  background: var(--well);
  color: var(--ink);
}
.card__head { display: flex; align-items: center; gap: 1rem; }
.card__face { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; }
.ihp .card__name { margin: 0; font-size: 1.3125rem; font-weight: 650; line-height: 1.2; letter-spacing: -.018em; color: var(--ink); }
.card__name span { font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .4rem 0 0; }
.card__date { margin-right: .3rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pill {
  padding: .2rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 11%, #fff);
  font-size: .75rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--c);
  white-space: nowrap;
}
.pill--deploy  { --c: var(--pl-deploy); }
.pill--plant   { --c: var(--pl-plant); }
.pill--protect { --c: var(--pl-protect); }
.pill--circuit { --c: var(--pl-circuit); }
.pill--reactor { --c: var(--pl-reactor); }
.pill--model   { --c: var(--pl-model); }
.ihp .card__bio { margin: var(--sp-4) 0 0; max-width: 62ch; font-size: .9375rem; line-height: 1.6; color: var(--ink-3); }

.card__key { position: relative; margin: var(--sp-6) 0; padding: 0 0 0 2.75rem; }
.card__key::before {
  content: "\201C";
  position: absolute; left: 0; top: -.35em;
  font-size: 4rem; font-weight: 700; line-height: 1;
  color: var(--pl);
}
.card__key p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
.card__key p + p { margin-top: .75em; }

.card__cols { display: grid; gap: var(--sp-5) var(--sp-6); margin: var(--sp-5) 0 0; }
@media (min-width: 52rem) { .card__cols { grid-template-columns: 1fr 1fr; } }
.card h6 { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-3); text-transform: none; }
.ihp .card__cols p { margin: 0 0 .65rem; max-width: none; font-size: .9375rem; line-height: 1.62; color: var(--ink-2); }

/* before and after: two soft panels and an arrow, the after in colour */
.shift { display: grid; gap: .75rem; align-items: stretch; margin: var(--sp-6) 0 0; }
@media (min-width: 52rem) { .shift { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); } .shift--one { grid-template-columns: minmax(0, 1fr); } }
.shift__col { padding: 1.15rem 1.35rem 1.25rem; border-radius: 18px; background: #fff; }
.shift__col--to { background: color-mix(in srgb, var(--pl) 9%, #fff); }
.shift__col--to h6 { color: var(--pl); }
.shift ul { margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; }
.shift li { position: relative; padding-left: 1rem; }
.shift li + li { margin-top: .5rem; }
.shift li::before { content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--ink-3); opacity: .45; }
.shift__col--to li::before { background: var(--pl); opacity: .8; }
.shift__col--from ul { color: var(--ink-3); }
.shift__col--to ul { color: var(--ink); }
.shift__arrow { align-self: center; justify-self: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center; background-size: .9rem; background-repeat: no-repeat; }
@media (max-width: 51.99rem) { .shift__arrow { transform: rotate(90deg); } }

.card .tiles { margin-top: var(--sp-6); }
.card .tiles .fig img { border-radius: 14px; }

/* between two cards: why we went on to the next person */
.bridge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 4.5rem 0;
  text-align: center;
}
.bridge::before, .bridge::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 3.25rem;
  background: linear-gradient(transparent, color-mix(in srgb, var(--pl) 55%, transparent));
}
.bridge::before { top: .5rem; }
.bridge::after { bottom: .5rem; transform: scaleY(-1); }
.ihp .bridge p { margin: 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; letter-spacing: -.008em; color: var(--ink-2); text-wrap: pretty; text-align: left; }
.ihp .bridge p + p { margin-top: .85rem; }

/* the chapter's close */
.pipe__end {
  margin: var(--sp-7) 0 0;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  border-radius: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pl) 13%, #fff), color-mix(in srgb, var(--pl) 5%, #fff));
}
.ihp .rail__panel .pipe__end p:not(.pipe__eyebrow) {
  margin: .75rem 0 0;
  max-width: 44rem;
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.016em;
  color: var(--ink);
}

/* arriving: each card and connection eases in once, the first time it is reached */
.pipe-anim .card, .pipe-anim .bridge p, .pipe-anim .pipe__end {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.pipe-anim .is-seen .card, .pipe-anim .is-seen.bridge p, .pipe-anim .pipe__end.is-seen { opacity: 1; transform: none; }

/* a link landing on a card marks it for a moment */
.node.is-flash { animation: none; }
.node.is-flash > .card { animation: card-flash 2.2s var(--ease); }
@keyframes card-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--pl); } 100% { box-shadow: 0 0 0 3px transparent; } }

@media (max-width: 47.99rem) {
  .seg { top: calc(var(--nav-h) + .5rem); margin-bottom: var(--sp-6); }
  .seg__track { justify-content: flex-start; }
  .card { border-radius: 22px; }
  .card__key { padding-left: 2rem; }
  .card__key::before { font-size: 3rem; }
  .bridge { padding: 3.5rem .5rem; }
  .cast a { width: 4.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seg__thumb, .rail--pipe > .rail__panel.is-entering { transition: none; animation: none; }
  .pipe-anim .card, .pipe-anim .bridge p, .pipe-anim .pipe__end { opacity: 1; transform: none; transition: none; }
}

.face-mono {
  display: inline-grid;
  place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--leaf-100);
  color: var(--leaf-900);
  font-weight: 700;
}

.cast .cast__face { display: inline-grid; flex: none; width: 3rem; height: 3rem; }
.card .card__face { display: inline-grid; flex: none; width: 3.5rem; height: 3.5rem; }

/* --------------------------------------------------- CONTINUOUS ENGAGEMENT -- */
/* The same soft language as 3.1. On top, every expert we went back to sits
   on one March-to-September ruler: two dots per person, the bar between
   them is the time we kept working with them. It is also the switch. Under
   it, each relationship is laid out as the conversation it was: the
   expert on the left, us on the right, months passing on the spine
   between the first meeting and the second. The team's own paragraphs are
   kept whole in wording, only split at the point where the speaker
   changes.                                                                */

.cont__intro { margin: var(--sp-5) auto 0; max-width: 42rem; text-align: left; }
.ihp .cont__intro p {
  margin: 0 auto var(--sp-3);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: -.008em;
  color: var(--ink-2);
}

.rail--cont { margin: var(--sp-7) 0 0; border: 0; --us: var(--leaf-700); }

/* -- the ruler -- */
.rail--cont .span {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: .5rem .5rem .6rem;
  border-radius: 28px;
  background: var(--well);
  --who: 15.5rem;
}
.span__axis { position: relative; display: grid; grid-template-columns: var(--who) 1fr; column-gap: 1.25rem; padding: .55rem 1.75rem 0 .75rem; height: 1.6rem; }
.span__axis-track { position: relative; grid-column: 2; }
.span__axis span span {
  position: absolute; left: var(--x); top: 0;
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3);
  transform: translateX(-50%);
}
.span__axis span span:first-child { transform: none; }
.span__thumb {
  position: absolute; left: .5rem; right: .5rem; top: 0;
  height: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .04);
  transition: transform .45s var(--ease), height .45s var(--ease);
}
.ihp .rail--cont .span__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.75rem calc(var(--who) - 3.75rem) 1fr;
  align-items: center;
  gap: 0 1rem;
  padding: .8rem 1.75rem .8rem .75rem;
  border: 0;
  border-radius: 20px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}
.ihp .rail--cont .span__row:hover { background: none; color: var(--ink); }
.span__row:not([aria-selected="true"]):hover .span__track { opacity: 1; }
.span__row:focus-visible { outline: 2px solid var(--pl); outline-offset: -2px; }
.span__track { grid-column: 3; margin-left: .25rem; }
.span__row .face-img {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--pl) 40%, transparent);
  filter: saturate(.7); transition: filter .3s ease;
}
.span__row[aria-selected="true"] .face-img { filter: none; }
.span__who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.span__who b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.span__who small { font-size: .75rem; line-height: 1.35; color: var(--ink-3); }
.span__track {
  position: relative;
  height: 2.75rem;
  opacity: .62;
  transition: opacity .3s ease;
  background:
    linear-gradient(var(--gray-300, #d2d2d7), var(--gray-300, #d2d2d7)) 0 50% / 100% 1px no-repeat;
}
.span__row[aria-selected="true"] .span__track { opacity: 1; }
.span__bar {
  position: absolute; top: 50%; left: var(--a);
  width: calc(var(--b) - var(--a)); height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pl) 30%, #fff), var(--pl));
  transform: translateY(-50%) scaleX(var(--grow, 1));
  transform-origin: left center;
  transition: transform 1.3s var(--ease);
}
.span__dot {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.span__dot--a { left: var(--a); background: #fff; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--pl) 55%, #fff); }
.span__dot--b { left: var(--b); background: var(--pl); box-shadow: 0 0 0 3px #fff; transition: opacity .4s ease 1.05s; opacity: var(--arrive, 1); }
.span__dot > span {
  position: absolute; bottom: 135%; left: 50%;
  transform: translateX(-50%);
  font-size: .6875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.span__dot--b > span { color: var(--pl); font-weight: 650; }
/* a meeting between the first and the last (Prof. Chen met us three times) */
.span__dot--m { left: var(--m); background: #fff; box-shadow: inset 0 0 0 2.5px var(--pl), 0 0 0 3px #fff; transition: opacity .4s ease .6s; opacity: var(--arrive, 1); }
.span-anim:not(.is-seen) .span__bar { --grow: 0; }
.span-anim:not(.is-seen) .span__dot--b, .span-anim:not(.is-seen) .span__dot--m { --arrive: 0; }
.span-anim .span__row:nth-of-type(2) .span__bar { transition-delay: .12s; }
.span-anim .span__row:nth-of-type(3) .span__bar { transition-delay: .24s; }
.span-anim .span__row:nth-of-type(4) .span__bar { transition-delay: .36s; }
.span-anim .span__row:nth-of-type(5) .span__bar { transition-delay: .48s; }
/* two meetings a few days apart: the dates stand either side of their dots, not on top of each other */
.span__row--tight .span__dot--a > span { left: auto; right: 50%; transform: none; padding-right: .15rem; }
.span__row--tight .span__dot--b > span { left: 50%; transform: none; padding-left: .15rem; }

/* -- one relationship -- */
.rail--cont > .rail__panel.conv { padding: 0; background: none; }
.rail--cont > .rail__panel.is-entering { animation: pipe-in .6s var(--ease) both; }
.conv__hero { margin: var(--sp-8, 4.5rem) 0 0; text-align: center; }
.conv__hero .face-img {
  display: block; margin: 0 auto;
  width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--pl) 50%, transparent);
}
.ihp .rail__panel .conv__name {
  margin: 1rem 0 0;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.025em;
  color: var(--ink);
}
.conv__name span { font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ihp .rail__panel .conv__field { margin: .45rem auto 0; font-size: .9375rem; color: var(--pl); font-weight: 550; }

/* the spine runs down the middle; the expert speaks from the left, we answer from the right */
.ihp .thread { position: relative; margin: var(--sp-7) 0 0; padding: 0 0 .5rem; list-style: none; --node: 3rem; }
.ihp .thread > li, .ihp .thread > li + li { margin: 0; }
.thread__spine { position: absolute; top: 0; bottom: var(--tail, 0); left: 50%; width: 2px; transform: translateX(-50%); background: var(--gray-200, #e8e8ed); border-radius: 2px; }
.thread__spine i {
  position: absolute; left: 0; top: 0; width: 100%;
  height: calc(var(--fill, 1) * 100%);
  border-radius: 2px;
  background: linear-gradient(var(--pl), var(--us));
}

.meet { position: relative; z-index: 1; display: flex; justify-content: center; padding: 1.75rem 0 1.25rem; }
.meet > span {
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl) 30%, transparent);
  font-size: .875rem; line-height: 1.2;
}
.meet b { font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
.meet time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meet--back > span { background: var(--pl); box-shadow: 0 8px 20px -10px var(--pl); }
.meet--back b, .meet--back time { color: #fff; }
.meet--back time { opacity: .8; }
.meet:first-of-type { padding-top: 0; }

.msg {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--node) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  padding: .75rem 0;
}
.msg__node {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  width: var(--node); height: var(--node);
  margin-top: .35rem;
}
.msg__node .face-img {
  width: var(--node); height: var(--node); flex: none;
  border-radius: 50%; object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--c, var(--pl)) 45%, transparent);
}
.msg--us .msg__node { --c: var(--us); }
.msg__node--pair .face-img { width: 2.5rem; height: 2.5rem; margin-top: .25rem; }
.msg__node--pair .face-img + .face-img { margin-left: -.9rem; }
.msg__body { grid-row: 1; padding: 1.25rem 1.5rem 1.35rem; border-radius: 24px; }
.msg--them .msg__body { grid-column: 1; border-top-right-radius: 6px; background: var(--well); }
.msg--us .msg__body { grid-column: 3; border-top-left-radius: 6px; background: color-mix(in srgb, var(--us) 8%, #fff); }
.msg h6 { margin: 0 0 .45rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink-3); }
.msg--them h6 { color: var(--pl); }
.msg--us h6 { color: var(--us); }
.ihp .rail__panel .msg p { margin: 0; max-width: none; font-size: .9375rem; line-height: 1.62; color: var(--ink-2); }
/* where it lands: the last thing we changed, a step stronger than the first */
.msg--last .msg__body { background: color-mix(in srgb, var(--us) 14%, #fff); box-shadow: 0 14px 30px -22px var(--us); }
.ihp .rail__panel .msg--last p { color: var(--ink); }

/* between the two meetings: the months, at their real spacing */
.gap { position: relative; height: clamp(5rem, calc(var(--days) * .072rem), 12rem); }
.gap span {
  position: absolute; top: var(--y); left: calc(50% + .9rem);
  transform: translateY(-50%);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3);
}
.gap span::before {
  content: ""; position: absolute; left: -.9rem; top: 50%;
  width: .55rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .5; transform: translate(-50%, -50%);
}

/* arriving: the spine fills as the reader goes down and each turn comes in as it is reached */
.thread-anim .msg__body, .thread-anim .msg__node, .thread-anim .meet > span, .thread-anim .gap span {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.thread-anim .msg--them .msg__body { transform: translateX(-18px); }
.thread-anim .msg--us .msg__body { transform: translateX(18px); }
.thread-anim .msg__node { transform: scale(.7); }
.thread-anim .meet > span { transform: translateY(8px); }
.thread-anim .is-lit .msg__body, .thread-anim .is-lit .msg__node, .thread-anim .meet.is-lit > span, .thread-anim .gap.is-lit span { opacity: 1; transform: none; }
.thread-anim .gap.is-lit span:nth-child(2) { transition-delay: .1s; }
.thread-anim .gap.is-lit span:nth-child(3) { transition-delay: .2s; }
.thread-anim .gap.is-lit span:nth-child(4) { transition-delay: .3s; }

@media (max-width: 51.99rem) {
  .rail--cont .span { --who: 0rem; padding: .4rem; border-radius: 22px; }
  .span__axis { grid-template-columns: 1fr; padding: .6rem 1.4rem 0 1.4rem; margin-left: 0; }
  .span__axis-track { grid-column: 1; }
  .ihp .rail--cont .span__row { grid-template-columns: 2.5rem 1fr; row-gap: .35rem; padding: .85rem 1.4rem .6rem; }
  .span__row .face-img { width: 2.5rem; height: 2.5rem; }
  .span__track { grid-column: 1 / -1; margin: .9rem 0 0; height: 1.75rem; }
  .ihp .thread { --node: 2.5rem; }
  .thread__spine { left: 1.25rem; }
  .msg { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: .85rem; }
  .msg__node { grid-column: 1; margin-top: .2rem; }
  .msg--them .msg__body, .msg--us .msg__body { grid-column: 2; border-top-left-radius: 6px; border-top-right-radius: 24px; padding: 1.1rem 1.2rem 1.2rem; }
  .msg__node--pair { flex-direction: column; align-items: center; height: auto; }
  .msg__node--pair .face-img { width: 2.25rem; height: 2.25rem; }
  .msg__node--pair .face-img + .face-img { margin: -.6rem 0 0; }
  .meet { justify-content: flex-start; padding-left: 0; }
  .gap span { left: 2.6rem; }
  .gap span::before { left: -1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .span__thumb, .span__bar, .span__dot--b, .span__dot--m { transition: none; }
  .thread-anim .msg__body, .thread-anim .msg__node, .thread-anim .meet > span, .thread-anim .gap span { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- TAGS -- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .6875rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--c);
  white-space: nowrap;
}
.tag::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.tag--deploy  { --c: var(--pl-deploy); }
.tag--plant   { --c: var(--pl-plant); }
.tag--protect { --c: var(--pl-protect); }
.tag--circuit { --c: var(--pl-circuit); }
.tag--reactor { --c: var(--pl-reactor); }
.tag--model   { --c: var(--pl-model); }

/* landing: the record a link just opened */
.is-flash { animation: ihp-flash 2.2s ease-out; }
@keyframes ihp-flash { 0%, 25% { background-color: var(--leaf-50); box-shadow: inset 3px 0 0 var(--leaf-500); } 100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; } }

/* -------------------------------------------------------------- PHOTOS -- */
/* Every photograph on the page is one tile: the same width, 4:3, cropped to
   fill. Charts are two tiles wide and never cropped. Captions are kept in
   the markup (the lightbox shows them, screen readers read them) but are
   not drawn on the page.                                                 */

.ihp { --tile: 13.25rem; --tgap: .5rem; }
.ihp .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  gap: var(--tgap);
  margin: var(--sp-4) 0 0;
}
.ihp .tiles .fig { margin: 0; }
.ihp .tiles .fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gray-100);
  cursor: zoom-in;
  transition: filter .2s ease;
}
.ihp .tiles .fig img:hover { filter: brightness(1.06); }

.ihp .pagebody .fig figcaption {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* a chart shows its caption under it; the ~120 timeline photos carry no
   figcaption at all, so they are untouched */
.ihp .pagebody .fig figcaption:is(:has(.fignum), :has(.figlegend)) {
  position: static !important;
  width: auto; height: auto;
  margin: .5rem .25rem 0; overflow: visible; clip: auto;
  white-space: normal;
  font-size: .8125rem; color: var(--gray-600);
}

.ihp .fig--chart { position: relative; width: calc(2 * var(--tile) + var(--tgap)); max-width: 100%; margin: 0; }
.ihp .fig--chart img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--white); border: 1px solid var(--gray-200); cursor: zoom-in; }
.fig__no {
  position: absolute; left: .5rem; top: .45rem;
  padding: .1rem .4rem;
  background: rgb(255 255 255 / .9);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  color: var(--gray-600);
  pointer-events: none;
}
.charts { display: grid; grid-template-columns: repeat(auto-fill, calc(2 * var(--tile) + var(--tgap))); gap: var(--sp-4) var(--tgap); margin: var(--sp-4) 0 var(--sp-5); }
.charts .fig { margin: 0; }

@media (max-width: 35.99rem) {
  .ihp .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .ihp .fig--chart { width: 100%; }
}


/* ------------------------------------------------- 3.2 PHOTOS AND ENDING -- */
/* A turn that has photographs carries them in the empty column across the
   spine: the meeting beside the advice, the work beside what we changed.
   A second photograph sits on the first one's outer corner.             */

.msg__pics { grid-row: 1; align-self: start; display: flex; flex-direction: column; margin-top: .35rem; min-width: 0; }
.msg--them .msg__pics { grid-column: 3; align-items: flex-start; }
.msg--us .msg__pics { grid-column: 1; align-items: flex-end; }
.ihp .pic { position: relative; margin: 0; width: 100%; }
.ihp .pic img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 22px;
  background: var(--well);
  box-shadow: 0 22px 40px -30px rgb(0 0 0 / .55);
  cursor: zoom-in;
}
.ihp .pic--wide img { aspect-ratio: auto; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 22px 40px -30px rgb(0 0 0 / .4); }
.ihp .pic--tall:first-child { width: 74%; }
.ihp .pic--tall:first-child img { aspect-ratio: 4 / 5; }
.ihp .pic + .pic { z-index: 1; width: 44%; margin-top: -17%; }
.msg--them .pic + .pic { margin-right: -.5rem; align-self: flex-end; }
.msg--us .pic + .pic { margin-left: -.5rem; align-self: flex-start; }
.ihp .pic + .pic img { aspect-ratio: 1; border: 5px solid #fff; border-radius: 20px; box-shadow: 0 16px 30px -18px rgb(0 0 0 / .45); }
.ihp .pic--tall + .pic, .ihp .pic + .pic--tall { width: 36%; }
.ihp .pic + .pic--tall img { aspect-ratio: 3 / 4; }
.ihp .pic--tall:first-child + .pic { margin-top: -30%; }
.thread-anim .msg__pics { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) .15s, transform .9s var(--ease) .15s; }
.thread-anim .is-lit .msg__pics { opacity: 1; transform: none; }

/* the ruler again, under the last turn, to go on to another expert */
.ihp .rail--cont .span--mini { margin: var(--sp-8) 0 0; }
.span--mini .span__row[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .04); }
.span--mini .span__row[aria-pressed="true"] .face-img, .span--mini .span__row[aria-pressed="true"] .span__track { filter: none; opacity: 1; }
.span--mini .span__row[aria-pressed="true"] { cursor: default; }

@media (max-width: 51.99rem) {
  .msg__pics, .msg--them .msg__pics, .msg--us .msg__pics { grid-column: 2; grid-row: 2; align-items: flex-start; margin-top: .75rem; }
  .msg--us .pic + .pic, .msg--them .pic + .pic { align-self: flex-end; margin: -17% -.25rem 0 0; }
  .ihp .pic--tall:first-child { width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .thread-anim .msg__pics { opacity: 1; transform: none; transition: none; } }

/* ============================================================ 4, 5 AND 6 ==
   The same soft language as section 3, with ReLeaf's green: cards on a
   pale leaf ground, rounded photographs set as a small mosaic, green for
   whatever names or marks a thing.                                       */

.ihp { --lwell: color-mix(in srgb, var(--leaf-700) 5.5%, #fff); --leaf: var(--leaf-700); }

.lede-c { margin: var(--sp-5) 0 0; max-width: 42rem; text-align: left; }
.ihp .lede-c p {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6; letter-spacing: -.008em;
  color: var(--ink-2);
}
.ihp .lede-c p + p { margin-top: var(--sp-3); }
.ihp .eyebrow { margin: 0 0 .55rem; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--leaf); }

/* -- photo mosaic: the first photograph leads, the rest follow small -- */
.bento { display: grid; gap: .5rem; margin: 0; }
.ihp .bento .fig { position: relative; margin: 0; min-width: 0; }
.ihp .bento .fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px;
  background: var(--well);
  cursor: zoom-in;
  transition: transform .5s var(--ease), filter .3s ease;
}
.ihp .bento .fig img:hover { filter: brightness(1.05); }
.ihp .bento .fig:first-child img { aspect-ratio: 3 / 2; border-radius: 18px; }
.bento--2 { grid-template-columns: 1fr 1fr; }
.ihp .bento--2 .fig:first-child img { aspect-ratio: 4 / 3; border-radius: 12px; }
.bento--3, .bento--5 { grid-template-columns: 1fr 1fr; }
.bento--3 .fig:first-child, .bento--5 .fig:first-child { grid-column: 1 / -1; }
.bento--4, .bento--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--4 .fig:first-child, .bento--7 .fig:first-child { grid-column: 1 / -1; }
.bento--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--6 .fig:first-child { grid-column: span 2; grid-row: span 2; }
.ihp .bento--6 .fig:first-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

/* -- shared card -- */
.ihp .quote { position: relative; margin: var(--sp-5) 0; padding: 0 0 0 2.6rem; }
.quote::before { content: "\201C"; position: absolute; left: 0; top: -.3em; font-size: 3.75rem; font-weight: 700; line-height: 1; color: var(--leaf); }
.ihp .quote p { margin: 0; max-width: 34ch; font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ihp .quote footer { margin-top: .6rem; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }

/* -- 4.1 farm events -- */
.evs { display: grid; gap: 1.25rem; margin: var(--sp-6) 0 0; }
.ev {
  display: grid; gap: 1.5rem 2.5rem; align-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 28px;
  background: var(--lwell);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}
@media (min-width: 62rem) { .ev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
/* the team's three phases of farmer interviews, named above the visits that belong to each */
.ihp .evs__phase { margin: 1.5rem 0 -.5rem; padding-left: .25rem; font-size: 1rem; }
.ihp .evs__phase:first-child { margin-top: 0; }
.ihp .ev__head .ev__date { margin: 0 0 .3rem; font-size: .875rem; font-weight: 600; color: var(--leaf); font-variant-numeric: tabular-nums; }
.ihp .ev__title { margin: 0 0 1rem; font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.024em; color: var(--ink); }
.ihp .ev__head .ev__who { margin: -.55rem 0 1rem; font-size: .875rem; line-height: 1.4; color: var(--ink-3); }
.ihp .ev__text p, .ihp .blk p, .ihp .app__panel p, .ihp .bcard p, .ihp .concl__card p { margin: 0 0 .85rem; max-width: 68ch; font-size: .96875rem; line-height: 1.65; color: var(--ink-2); }
.ihp .ev__text p:last-child, .ihp .blk p:last-child { margin-bottom: 0; }
#forum { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }

/* -- 4.2 LINE platform -- */
.line-hero {
  display: grid; gap: 1.75rem 2.5rem; align-items: center;
  margin: var(--sp-5) 0 0;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border-radius: 28px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--leaf) 13%, #fff), color-mix(in srgb, var(--leaf) 4%, #fff));
}
@media (min-width: 52rem) { .line-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.ihp .line-hero__text p:not(.eyebrow) { margin: 0; font-size: 1.0625rem; line-height: 1.65; letter-spacing: -.005em; color: var(--ink); }
.ihp .line-hero__text p:not(.eyebrow) + p { margin-top: .85rem; }
.ihp .line-hero__shot { margin: 0; }
.ihp .line-hero__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 26px 44px -30px rgb(20 64 43 / .6); cursor: zoom-in; }
.line-design { display: grid; gap: 1.5rem 2.5rem; align-items: center; margin: var(--sp-7) 0 0; }
@media (min-width: 52rem) { .line-design { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ihp .line-design__text p:not(.eyebrow) { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.ihp .line-design__menu { margin: 0; padding: .9rem; border-radius: 26px; background: var(--lwell); }
.ihp .line-design__menu img { display: block; width: 100%; height: auto; border-radius: 16px; cursor: zoom-in; }

.rail--app { display: grid; gap: 1rem 1.25rem; align-items: start; margin: var(--sp-6) 0 0; border: 0; }
@media (min-width: 52rem) {
  .rail--app { grid-template-columns: 16rem minmax(0, 1fr); }
  .js .rail--app > .rail__panel { grid-column: 2; grid-row: 1; }
  .app__list { position: sticky; top: calc(var(--nav-h) + 1rem); }
}
.ihp .rail--app .app__list {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: .45rem;
  border-radius: 24px;
  background: var(--lwell);
}
.ihp .rail--app .app__btn {
  display: flex; flex-direction: row; align-items: center; gap: .75rem;
  padding: .55rem .7rem;
  border: 0; border-radius: 16px;
  background: none;
  color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.ihp .rail--app .app__btn:hover { background: rgb(255 255 255 / .6); color: var(--ink); }
.ihp .rail--app .app__btn[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgb(0 0 0 / .07), 0 0 0 .5px rgb(0 0 0 / .04); }
.app__btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.app__ico {
  flex: none; width: 2.25rem; height: 2.25rem; padding: .5rem;
  border-radius: 11px;
  background: #fff; color: var(--leaf);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leaf) 16%, transparent);
  transition: background-color .25s ease, color .25s ease;
}
.app__btn[aria-selected="true"] .app__ico { background: var(--leaf); color: #fff; box-shadow: none; }
.app__txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.app__txt b { font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.app__txt small { font-size: .75rem; line-height: 1.25; color: var(--ink-3); }
.ihp .rail--app .app__panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 44px -34px rgb(0 0 0 / .35);
}
.rail--app > .rail__panel.is-entering { animation: pipe-in .5s var(--ease) both; }
.ihp .rail--app .app__panel h4 { margin: 0 0 1rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 700; line-height: 1.2; letter-spacing: -.022em; color: var(--ink); }
.app__panel h4 span { font-weight: 500; color: var(--ink-3); }
.app__shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); gap: .6rem; margin: 1.25rem 0 0; }
.app__shots:has(> .fig:only-child) { grid-template-columns: minmax(0, 22rem); }
.ihp .app__shots .fig { margin: 0; }
.ihp .app__shots .fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 14px; background: var(--lwell); box-shadow: 0 0 0 1px rgb(0 0 0 / .06); cursor: zoom-in; }
.ihp .app__shots .fig:only-child img { aspect-ratio: auto; }

/* -- 5 public engagement -- */
.heroshot { position: relative; margin: var(--sp-6) 0 calc(var(--sp-6) + 1.5rem); }
.ihp .heroshot .fig { margin: 0; }
.ihp .heroshot .fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; cursor: zoom-in; }
.ihp .heroshot .fig + .fig { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: -1.75rem; width: 30%; }
.ihp .heroshot .fig + .fig img { aspect-ratio: 4 / 3; border: 6px solid #fff; border-radius: 20px; box-shadow: 0 20px 40px -22px rgb(0 0 0 / .5); }
.heroshot--one { margin-bottom: var(--sp-6); }

.blk {
  margin: 1.25rem 0 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: 28px;
  background: var(--lwell);
}
.ihp .blk__h { margin: 0 0 .9rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.blk > .bento { margin-top: 1.25rem; }
.ihp .blk--head { margin-top: var(--sp-7); padding: 0; background: none; }

.voices { display: grid; gap: .75rem; margin: 1.25rem 0 0; }
@media (min-width: 52rem) {
  .voices { grid-template-columns: 1fr 1fr; }
  .voices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.voice--wide { grid-column: 1 / -1; }
.voice { padding: 1.3rem 1.45rem 1.4rem; border-radius: 20px; background: #fff; }
.ihp p.voice__who { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 650; color: var(--leaf); }
.ihp .voice p:not(.voice__who) { font-size: .9375rem; }
.ihp .voice .quote { margin: 1.25rem 0; }
.ihp .voice .quote p { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); max-width: 40ch; }

.ihp .golink {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .35rem; padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--leaf); color: #fff;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: background-color .2s ease;
}
.golink::after { content: "\2197"; font-weight: 500; }
.ihp .golink:hover { background: var(--leaf-900); color: #fff; }

.chartbox { margin: 1.25rem 0; padding: .75rem; border-radius: 22px; background: #fff; }
.ihp .chartbox .charts { display: grid; gap: .75rem; margin: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .ihp .chartbox .charts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihp .chartbox .charts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ihp .chartbox .charts--1 { max-width: 40rem; margin: 0 auto; }
.ihp .chartbox .fig--chart { width: auto; }
.ihp .chartbox .fig--chart img { border: 0; border-radius: 12px; }
.ihp .chartbox .fig__no { border-radius: 999px; background: var(--lwell); color: var(--leaf); }

.ihp p.kap { display: inline-block; margin: 0 0 .25rem; padding: .35rem .95rem; border-radius: 999px; background: var(--leaf); color: #fff; font-size: .8125rem; font-weight: 600; }
.ihp .findings { display: grid; gap: .5rem; margin: 1rem 0 1.25rem; padding: 0; max-width: none; list-style: none; }
.ihp .findings li { position: relative; margin: 0; padding: .9rem 1.15rem .9rem 2.75rem; border-radius: 16px; background: #fff; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.findings li::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.18rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: color-mix(in srgb, var(--leaf) 18%, #fff);
  box-shadow: inset 0 0 0 3px var(--leaf);
}
.findings b, .lead-in b { color: var(--ink); font-weight: 650; }

.end {
  margin: 1.25rem 0 0;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  border-radius: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--leaf) 15%, #fff), color-mix(in srgb, var(--leaf) 5%, #fff));
}
.ihp p.end__label { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; color: var(--leaf); }
.ihp .end p:not(.end__label) { margin: 0 0 .9rem; max-width: 46rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--ink); }
.ihp .end p:last-child { margin-bottom: 0; }
.blk .end { background: #fff; }

/* -- 5.2 booths -- */
.booths { display: grid; gap: 1rem; margin: 0; }
@media (min-width: 52rem) { .booths { grid-template-columns: 1fr 1fr; } }
.bcard { display: flex; flex-direction: column; padding: .6rem .6rem 1.5rem; border-radius: 28px; background: var(--lwell); }
.ihp .bcard .bento .fig:first-child img { border-radius: 22px; }
.bcard__text { padding: 1.15rem 1rem 0; }
.ihp .bcard h5 { margin: 0 0 .55rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.018em; text-transform: none; color: var(--ink); }
.ihp .bcard p { margin: 0; font-size: .9375rem; }

/* -- 6 conclusion -- */
.ihp .concl__sum { margin-bottom: var(--sp-6); }
.ihp .lede-c p.eyebrow { margin: 0 0 .55rem; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.4; color: var(--leaf); }
.concl { display: grid; gap: 1rem; margin: var(--sp-5) 0 0; }
@media (min-width: 52rem) { .concl { grid-template-columns: 1fr 1fr; } .concl__card:first-child, .concl__card--final { grid-column: 1 / -1; } }
.concl__card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 28px; background: var(--lwell); }
.concl__ico {
  display: block; width: 2.75rem; height: 2.75rem; padding: .6rem; margin: 0 0 1.1rem;
  border-radius: 14px; background: #fff; color: var(--leaf);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leaf) 16%, transparent);
}
.ihp .concl__card h4 { margin: 0 0 .6rem; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.ihp .concl__card p { margin: 0; }
.ihp .concl__card:first-child p { font-size: 1.0625rem; color: var(--ink); max-width: 60ch; }
.concl__card--final { background: linear-gradient(150deg, #23684a, #14402b 75%); }
.ihp .concl__card--final h4 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ihp .concl__card--final p { max-width: 52ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: rgb(255 255 255 / .86); }
.concl__card--final .concl__ico { background: rgb(255 255 255 / .12); color: #cfe4d8; box-shadow: none; }

/* inside a card the photographs run as one row: the first wider, the rest small */
.ihp .blk > .bento { display: flex; gap: .5rem; height: clamp(8.5rem, 4rem + 11vw, 12.5rem); }
.ihp .blk > .bento .fig { flex: 1 1 0; }
.ihp .blk > .bento .fig:first-child { flex-grow: 1.9; }
.ihp .blk > .bento .fig img, .ihp .blk > .bento .fig:first-child img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 14px; }
.ihp .blk > .bento--1 { height: clamp(11rem, 6rem + 14vw, 17rem); }
@media (max-width: 40rem) {
  .ihp .blk > .bento { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .ihp .blk > .bento .fig img, .ihp .blk > .bento .fig:first-child img { aspect-ratio: 4 / 3; height: auto; }
  .ihp .blk > .bento .fig:first-child { grid-column: 1 / -1; }
}
/* a long account keeps its photographs in view */
@media (min-width: 62rem) { .ev > .bento { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }

@media (max-width: 51.99rem) {
  .ihp .rail--app .app__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .app__list::-webkit-scrollbar { display: none; }
  .ihp .rail--app .app__btn { flex: none; }
  .ihp .heroshot .fig + .fig { width: 40%; bottom: -1.25rem; }
}

/* ----------------------------------------------------------------- PRINT -- */

@media print {
  .rail__panel[hidden] { display: block; }
  .rail__strip { display: none; }
}