/* ---- Assembly guides strip (19 Oct 2026) -----------------------------------
   The instructor's request: the four assembly guides on the hub, between the
   instruments and the notebook. A centred head that says plainly what they
   are (a reader may not have opened any instrument yet), then four download
   cards in a row, each in its instrument's colour (--c-reactor,
   --c-photometer x2, --c-diopal from polish.css): bioreactor left,
   photometers middle, LPA right. Two by two on a phone. Same dark ground as
   the sections either side, with a faint blueprint grid and a glow behind
   the row. */

.hg {
  --hg-bg: #05060a;
  --hg-ink: #eef2f6;
  --hg-ink-2: #aeb8c3;
  --hg-ink-3: #8994a0;
  --hg-line: rgba(255, 255, 255, .09);
  position: relative; z-index: 2; isolation: isolate; box-sizing: border-box;
  padding: clamp(80px, 12svh, 128px) 16px clamp(44px, 6.5svh, 68px);
  background: var(--hg-bg); color: var(--hg-ink);
  text-align: center;
}
/* a hairline across the top in the four colours, fading out at the ends */
.hg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent 8%, var(--c-reactor) 30%, var(--c-photometer) 50%, var(--c-diopal) 70%, transparent 92%);
  opacity: .45;
}
/* the blueprint grid, only round the middle */
.hg::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 10%, transparent 75%);
}

.hg-head { max-width: 50rem; margin: 0 auto clamp(44px, 6.5svh, 64px); }
.hg-k {
  /* the hub's section kicker (css/hub-head.css .sh-k): a green pill, then a quiet one */
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 clamp(1.1rem, 2.4svh, 1.6rem); padding: 0;
  font-family: var(--mono, ui-monospace, monospace); font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase;
}
.hg-k span { padding: .32rem .62rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .025); color: var(--faint, #8b95a3); }
.hg-k span:first-child { color: #3ddc8b; border-color: color-mix(in srgb, #3ddc8b 38%, transparent); background: color-mix(in srgb, #3ddc8b 8%, transparent); }
.hg-t {
  margin: 0; font-family: var(--sans, system-ui, sans-serif); font-weight: 650;
  font-size: var(--hub-h2, clamp(1.9rem, 1rem + 2vw, 2.85rem)); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
  background: linear-gradient(#fff 15%, #e9eef3 60%, #cfd8e2); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hg-sub {
  margin: clamp(.9rem, 2svh, 1.25rem) auto 0; max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--hg-ink-2); text-wrap: balance;
}

/* ---- the grid (19 Oct 2026, with the brochure and the manual) --------------------------------------------------
   Left, the bioreactor, featured: its brochure cover and its three documents. Right, the three other guides as full
   cards, each with its cover, stacked to the panel's height. One column on a phone. */
.hg-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 24px);
  width: var(--hub-col, min(1280px, 100%)); max-width: 100%; margin: 0 auto; text-align: left;
}
.hg-feat, .hg-key {
  --hg-edge: color-mix(in srgb, var(--c) 28%, rgba(255, 255, 255, .06));
  position: relative; border: 1px solid var(--hg-edge); border-radius: 18px; color: var(--hg-ink);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 15%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px -24px color-mix(in srgb, var(--c) 45%, transparent);
}
.hg-kind {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-family: var(--mono, ui-monospace, monospace); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 80%, #fff);
}
.hg-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.hg-name { font-weight: 650; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; }
.hg-meta {
  display: flex; flex-wrap: wrap; gap: .1rem .8rem;
  font-family: var(--mono, ui-monospace, monospace); font-size: .6875rem; letter-spacing: .05em;
  color: var(--hg-ink-3); font-variant-numeric: tabular-nums;
}
.hg-doc-t { display: grid; gap: .25rem; min-width: 0; }
.hg-thumb {
  display: block; width: 46px; height: auto; aspect-ratio: 320 / 414; object-fit: cover; object-position: top;
  border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 18px -8px rgba(0, 0, 0, .8);
  transition: transform .25s var(--ease, ease);
}
.hg-ic {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); font-style: normal;
  transition: background-color .25s var(--ease, ease), color .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.hg-ic svg { display: block; }

/* the featured bioreactor */
.hg-feat { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 1.6vw, 22px); }
.hg-feat-img {
  /* contain: size, so the text sets the panel's height and the cover fits that, never the other way round */
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; contain: size;
  padding: clamp(14px, 1.6vw, 22px); border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--c-reactor, #5aa9ff) 16%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .005));
}
.hg-feat-img img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 320 / 452;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 28px 50px -22px rgba(0, 0, 0, .95);
  transition: transform .35s var(--ease, ease);
}
.hg-feat:hover .hg-feat-img img { transform: translateY(-3px); }
.hg-feat-tx { display: flex; flex-direction: column; min-width: 0; padding: .2rem 0; }
.hg-feat-t { margin: .5rem 0 0; font-family: var(--sans, system-ui, sans-serif); font-weight: 650; font-size: clamp(1.35rem, 1rem + .9vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; color: var(--hg-ink); }
.hg-feat-sub { margin: .45rem 0 1rem; font-size: .9375rem; line-height: 1.5; color: var(--hg-ink-2); text-wrap: balance; }
.hg-docs { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 10px; }
.hg-docs li { margin: 0; }
.hg-doc {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: 10px 14px 10px 10px; border-radius: 12px; text-decoration: none; color: var(--hg-ink);
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025);
  transition: border-color .25s var(--ease, ease), background-color .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.hg-doc .hg-thumb { width: 38px; }
.hg-doc:hover, .hg-doc:focus-visible { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); transform: translateX(3px); }
.hg-doc:hover .hg-ic, .hg-doc:focus-visible .hg-ic { background: var(--c); color: #05060a; }
.hg-doc:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* the three other guides */
.hg-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.hg-row li { margin: 0; min-width: 0; display: grid; }
.hg-key {
  overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 16px 20px 16px 16px; text-decoration: none;
  transition: border-color .25s var(--ease, ease), transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
.hg-key::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s var(--ease, ease);
}
.hg-key .hg-thumb { width: 58px; }
.hg-key:hover, .hg-key:focus-visible {
  border-color: color-mix(in srgb, var(--c) 65%, transparent); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 48px -24px color-mix(in srgb, var(--c) 85%, transparent);
}
.hg-key:hover::after, .hg-key:focus-visible::after { transform: translateX(120%); }
.hg-key:hover .hg-ic, .hg-key:focus-visible .hg-ic { background: var(--c); color: #05060a; transform: translateY(2px); }
.hg-key:hover .hg-thumb, .hg-doc:hover .hg-thumb { transform: rotate(-3deg) scale(1.06); }
.hg-key:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

/* laptop widths: the bioreactor panel across the column, the three other guides in a row under it */
@media (min-width: 901px) and (max-width: 1240px) {
  .hg-grid { grid-template-columns: minmax(0, 1fr); }
  .hg-feat { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .hg-row { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hg-key { gap: .8rem; padding: 14px 14px 14px 12px; }
  .hg-key .hg-thumb { width: 48px; }
}
@media (max-width: 900px) {
  .hg-grid { grid-template-columns: minmax(0, 1fr); width: min(var(--hub-col, 100%), 46rem); }
  .hg-row { grid-template-rows: none; }
}
@media (max-width: 520px) {
  .hg-feat { grid-template-columns: minmax(0, 1fr); }
  .hg-feat-img { contain: none; }
  .hg-feat-img img { max-width: 168px; }
  .hg-feat-sub { margin-bottom: .9rem; }
  .hg-key { gap: .8rem; padding: 14px 14px 14px 12px; }
  .hg-key .hg-thumb { width: 44px; }
  .hg-meta { gap: .1rem .6rem; font-size: .6875rem; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-key, .hg-doc, .hg-ic, .hg-thumb, .hg-key::after, .hg-feat-img img { transition: none; }
  .hg-key:hover, .hg-key:focus-visible, .hg-doc:hover, .hg-feat:hover .hg-feat-img img { transform: none; }
}

/* ---- the faint CAD line drawings behind the section (19 Oct 2026) ------------------------------------------------
   The lab rig to the right of the head, the Pro photometer to the left, both cut by the section's edge and fading
   into it. Faint enough to read as texture: the eye finds them only once it looks. Not on a phone, where they would
   sit behind the text. */
.hg-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hg-art img { position: absolute; display: block; height: auto; max-width: none; }
.hg-art-br {
  width: clamp(520px, 44vw, 740px); right: calc(-1 * clamp(90px, 10vw, 190px)); top: clamp(0px, 2svh, 30px);
  opacity: .13;
  -webkit-mask-image: radial-gradient(70% 66% at 58% 42%, #000 32%, transparent 76%);
          mask-image: radial-gradient(70% 66% at 58% 42%, #000 32%, transparent 76%);
}
.hg-art-pm {
  width: clamp(270px, 25vw, 400px); left: clamp(4px, 2.2vw, 40px); top: clamp(0px, 2svh, 30px);
  opacity: .13;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 92%);
          mask-image: linear-gradient(#000 45%, transparent 92%);
}
@media (max-width: 900px) { .hg-art-pm { display: none; } .hg-art-br { width: 520px; right: -140px; opacity: .11; } }
@media (max-width: 600px) { .hg-art { display: none; } }