/* =============================================================================
   Description: the few things page.css and engage.css do not do.
   Since 11 October 2026 the page reads straight down. The tab rails that the
   10 October pass introduced are gone at the team's request, so what is left
   here is the figure work and the three Integrated Human Practice visits.
   ========================================================================== */

/* A 7:2 flow strip at 375px is 100px tall and none of its labels can be read,
   and the lightbox does not help because it fits the same strip into the same
   width. So on a narrow screen the diagram becomes a horizontal scroller at a
   height that keeps the type legible. Above that width nothing changes.     */
@media (max-width: 720px) {
  .fig__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: var(--well);
  }
  .fig__scroll img {
    width: auto; max-width: none;
    height: 300px;
    border: 0; border-radius: 0;
  }
}

/* the two wide circuit diagrams read better with room around them */
.engage.desc .sec > .fig,
.engage.desc .step > .fig { max-width: 56rem; }

/* The abstract asks for its two paragraphs at one size and one face, so the
   opening sentence drops the serif display setting it has on other pages. */
.desc .abstract--sheet .abstract__lead {
  max-width: 66ch;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--ink-2);
  text-wrap: pretty;
}
.desc .abstract--sheet .abstract__body { margin-top: .7rem; }

/* The bioreactor render is a tall cut-out on transparency. Left at the width
   of the flow diagrams it would stand two screens high, so it is held to a
   column and sits on the page's own white rather than in a well.           */
.engage.desc .step > .fig--tall { max-width: 26rem; margin-inline: auto; }
.engage.desc .step > .fig--tall img { background: none; border: 0; }

/* the four steps of the system, one after another */
.engage.desc .step + .step { margin-top: var(--sp-5); }

/* A visit: the photograph on one half, the account on the other, the side
   alternating down the section. Below 52rem the photograph goes on top.    */
.engage.desc .visit {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin: var(--sp-5) 0 0;
}
@media (min-width: 52rem) {
  .engage.desc .visit { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .engage.desc .visit--flip .fig { order: 2; }
}
.engage.desc .visit .fig { margin: 0; }
.engage.desc .visit .fig img {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
}
.engage.desc .visit__text p { margin: 0; max-width: none; }

/* the sentence that sends the reader on to Integrated Human Practices */
.engage.desc .visit + p { margin-top: var(--sp-6); }

/* Paragraphs run the whole column. engage.css holds .sec > p to a 76ch
   measure, which on this page left a wide empty gutter down the right and
   broke every line short of it; the team asked for full lines instead.    */
.engage.desc .pagebody .sec > p { max-width: none; }

/* =============================================================================
   TECHNICAL MAP · moved here 19 October 2026
   -----------------------------------------------------------------------------
   The whole project as twelve blocks in three lanes, with an arrow for every
   hand-off between them, above the first section and running the full width of
   the window. It was built for /engineering on 18 October and moved here, where
   a reader meets it before the challenge rather than after the cycles.

   The drawing is an inline SVG laid out by hand in build_map.py (agent
   scratchpad) and its pictures are the team's own BioRender icons, in
   assets/img/engineering/map. Nothing is computed at runtime and no arrow
   crosses another.

   Below 64rem the drawing goes and the same twelve blocks read as a list, in
   the same order, each naming its lane. Both come out of one table in the
   build script, so they cannot drift apart.                                  */

/* the band. The sheet above it stops at --bh-max; the map does not, so the
   1620x678 drawing gets the window, less a gutter.                          */
.engage.desc .tmapband {
  margin: clamp(1.75rem, 1rem + 2vw, 3rem) 0 0;
  /* the drawing used to read these off .bannerhead[data-tab="project"]; the
     band is outside that scope, so it carries the same two values itself */
  --ink-1: #2a1d22;
  --paper-2: #fffbfb;
}
.engage.desc .tmapband__inner { max-width: 2040px; margin: 0 auto; padding: 0 clamp(.9rem, .2rem + 2.2vw, 2.5rem); }

.tmap {
  margin: 0;
  padding: clamp(1rem, .6rem + 1vw, 1.5rem) clamp(.9rem, .4rem + 1vw, 1.5rem) clamp(1rem, .6rem + 1vw, 1.4rem);
  background: rgb(255 255 255 / .9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgb(29 38 32 / .05), 0 18px 40px -28px rgb(29 38 32 / .24);
}
.tmap__head { margin: 0 0 .5rem; }
.tmap__head .abs-kicker { margin: 0; }

/* the drawing */
.tmapfig { display: block; width: 100%; height: auto; }
.tmapfig__band { fill: #f7f9f6; }
.tmapfig__lane { font-size: 12.5px; font-weight: 650; letter-spacing: .14em; }
.tmapfig__card { fill: #fff; stroke: rgb(29 38 32 / .13); stroke-width: 1; }
.tmapfig__card.is-main { stroke: rgb(47 107 74 / .5); stroke-width: 1.6; }
.tmapfig__node { cursor: pointer; }
.tmapfig__node .tmapfig__card { transition: stroke .25s ease, filter .25s ease; }
.tmapfig__node:hover .tmapfig__card, .tmapfig__node:focus-visible .tmapfig__card {
  stroke: rgb(29 38 32 / .34);
  filter: drop-shadow(0 6px 14px rgb(29 38 32 / .16));
}
.tmapfig__name { font-size: 19px; font-weight: 640; fill: var(--ink-1); }
.tmapfig__res  { font-size: 13px; fill: var(--ink-3); }
.tmapfig__flow { fill: none; stroke: #8b938c; stroke-width: 1.3; }
.tmapfig__main { fill: none; stroke: #2f6b4a; stroke-width: 5.2; stroke-linejoin: round; stroke-linecap: round; }
.tmapfig__back { fill: none; stroke: #9aa39c; stroke-width: 1.4; stroke-dasharray: 5 4; }
.tmapfig__lab  { font-size: 13.5px; fill: #78817a; }
.tmapfig__lab.is-main { font-size: 14px; font-weight: 580; fill: #2f6b4a; }


/* the reading panel. The drawing answers "what talks to what"; a first-time
   reader also needs "what IS this block", which is what the panel carries:
   one card per block, a real picture of the thing or of its result, what it
   is, and what it does here. Hovering or tabbing a block swaps the card.
   Below 78rem the panel sits under the drawing instead of beside it, so the
   drawing never has to shrink into a column too narrow to read.            */
.tmap__grid { display: grid; gap: clamp(.9rem, .4rem + 1vw, 1.4rem); }
@media (min-width: 86rem) {
  .tmap__grid { grid-template-columns: minmax(0, 1fr) clamp(17rem, 23vw, 22.5rem); align-items: stretch; }
  .tmapfig { align-self: center; }
}

/* between the list and the side-by-side layout the panel goes under the
   drawing and turns on its side, so the drawing keeps the whole width   */
@media (min-width: 64rem) and (max-width: 85.999rem) {
  .tmapinfo__card { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 1.2rem; align-content: start; }
  .tmapinfo__frame { grid-column: 1; grid-row: 1 / span 5; align-self: start; margin: 0; }
  .tmapinfo__eyebrow { grid-column: 2; grid-row: 1; }
  .tmapinfo__name    { grid-column: 2; grid-row: 2; margin-bottom: .4rem; }
  .tmapinfo__what    { grid-column: 2; grid-row: 3; font-size: .875rem; }
  .tmapinfo__role    { grid-column: 2; grid-row: 4; font-size: .875rem; }
  .tmapinfo__go      { grid-column: 2; grid-row: 5; justify-self: start; }
}

/* the twelve cards sit in one grid cell, so the box is always as tall as the
   longest of them and swapping a card never moves the page under the reader */
.tmapinfo { display: grid; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgb(29 38 32 / .07); }
.tmapinfo__card { grid-area: 1 / 1; padding: clamp(.9rem, .6rem + .6vw, 1.15rem); opacity: 0; visibility: hidden; }
.tmapinfo__card.is-on { opacity: 1; visibility: visible; }

.tmapinfo__eyebrow {
  margin: 0 0 .15rem;
  font-size: .625rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

.tmapinfo__name { margin: 0 0 .6rem; font-size: 1.1875rem; font-weight: 650; line-height: 1.2; color: var(--ink-1); }

.tmapinfo__frame { margin: 0 0 .7rem; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(29 38 32 / .07); }
.tmapinfo__frame img { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: contain; }

.tmapinfo__what, .tmapinfo__role { margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.tmapinfo__what { color: var(--ink-1); }
.tmapinfo__role { color: var(--ink-3); }

.tmapinfo__go { display: inline-block; font-size: .75rem; font-weight: 620; color: #2f6b4a; text-decoration: none; border-bottom: 1px solid rgb(47 107 74 / .35); }
.tmapinfo__go:hover, .tmapinfo__go:focus-visible { border-bottom-color: #2f6b4a; }

/* the block whose card is up reads as the one being read */
.tmapfig__node.is-on .tmapfig__card { stroke: #2f6b4a; stroke-width: 2; filter: drop-shadow(0 6px 16px rgb(47 107 74 / .28)); }
.tmapfig__node.is-on .tmapfig__name { fill: #2f6b4a; }

@media (prefers-reduced-motion: no-preference) {
  .tmapinfo__card { transition: opacity .2s ease, visibility .2s; }
  .tmapfig__node .tmapfig__name { transition: fill .25s ease; }
}

/* the same blocks, stacked, on a narrow window. The drawing and its panel
   both go; each row carries the sentence the panel would have shown.      */
@media (max-width: 63.999rem) { .tmapinfo { display: none; } }
.tmaplist { display: none; }
.tmaplist__what { display: block; }
@media (max-width: 64rem) {
  .tmapfig { display: none; }
  .tmaplist { display: block; list-style: none; margin: 0; padding: 0; }
  .tmaplist li + li { margin-top: .4rem; }
  .tmaplist a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    row-gap: .1rem;
    column-gap: .8rem;
    padding: .6rem .75rem;
    border-radius: 14px;
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px rgb(29 38 32 / .06);
    text-decoration: none; color: inherit;
  }
  .tmaplist img { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; object-fit: contain; }
  .tmaplist__lane { grid-column: 2; grid-row: 1; align-self: end; font-size: .625rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .tmaplist__name { grid-column: 2; grid-row: 2; font-size: .9375rem; font-weight: 620; color: var(--ink-1); }
  .tmaplist a { grid-template-rows: auto auto auto; }
  .tmaplist__what { grid-column: 2; grid-row: 3; margin-top: .25rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
  .tmaplist img { align-self: start; }
}