/* assets/css/pages/tools.css - shipped copy. Comments removed at build time by tools/strip-comments.mjs.
   Not minified: the names, the line breaks and the indentation are the author's own. */
.tools-band {
  position: relative;
  background: var(--ink);
  min-height: 320px;
}

.tools-band .wrap {
  padding-top: calc(var(--nav-h) + var(--head-gap));
  padding-bottom: 16px;
}

.tools-band .band-kicker {
  color: var(--iv-faint);
  letter-spacing: var(--t-kicker-track, .18em);
}

.tools-band .band-h1 {
  margin: 16px 0 0;
  font-size: var(--t-display-size, clamp(38px, 5.5vw, 68px));
  font-weight: var(--t-display-weight, 700);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: rgba(243, 238, 228, var(--t-head-alpha, .92));
  max-width: none;
}

.tools-band .tools-sub {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: -.008em;
  line-height: 1.55;
  max-width: 46ch;
  color: var(--iv-dim);
}

.workbench .tools-meta { margin: 0 0 24px; color: var(--ik-dim); }

.band-ticks-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.tools-band .band-ticks-row {
  padding-top: 0;
  padding-bottom: 0;
}
.band-ticks {
  display: flex;
  gap: 31px;
  align-items: flex-end;
}
.band-ticks span {
  width: 1px;
  height: 8px;
  background: var(--ivory);
}

.workbench {
  background: var(--ivory);
  padding-top: 64px;
  padding-bottom: var(--sec-pad, 96px);
}

.rack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

#carimac-kit,
#clipping-toolchain {
  scroll-margin-top: calc(var(--nav-h, 64px) + 16px);
}

.rack-card .card-catalogue,
.rack-row .card-catalogue { font-weight: 500; color: var(--ik-dim); }

.rack-row {
  border-top: var(--hair, 1px) solid var(--ik-hair);
  padding: var(--row-pad, 13px 0);
  margin-top: 48px;
}
.rack-row .row-head {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.rack-row .card-oneliner {
  margin-top: 24px;
  color: var(--ik-dim);
  max-width: 62ch;
}
.rack-row .card-oneliner a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--t-link-line, 1.5px);
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: text-underline-offset var(--t-hover-out, 450ms) var(--ease-wipe, cubic-bezier(.6, .1, .2, 1));
}
.rack-row .card-oneliner a:hover,
.rack-row .card-oneliner a:focus-visible {
  text-underline-offset: 4px;
  transition-duration: var(--t-hover-in, 150ms);
}
.rack-row .card-state {
  margin-top: 24px;
  color: var(--ik-faint);
  max-width: 62ch;
}
.rack-row .card-dated {
  margin-top: 8px;
  color: var(--ik-faint);
}

.rack-crosslink {
  margin-top: 64px;
  border-top: var(--hair) solid var(--ik-hair);
  padding-top: var(--block-pad);
}
.rack-crosslink a { color: var(--ink); }

.rack-growth {
  margin-top: 48px;
  max-width: 62ch;
  text-wrap: balance;
}

html.js .tools-band [data-seq] {
  transition: opacity var(--t-fade, 300ms) var(--ease-wipe, cubic-bezier(.6, .1, .2, 1));
}
html.js:not(.seq-done) .tools-band [data-seq]:not(.is-in) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js .tools-band [data-seq] { opacity: 1 !important; transition: none !important; }
}

@media (max-width: 840px) {
  .rack-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .tools-band .wrap { padding-top: 128px; }
}