/* Kipu, LLC — marketing site.
   Layout follows the design system's "page as a quipu" motif: a hairline primary cord
   runs down a 64px left gutter, every section hangs off it, and each section number
   hangs off it too — a pendant cord whose knots carry the number in khipu notation
   (figure-eight = 1, long knot gaining a turn per unit for 2–9), generated from the
   design system's khipu-geometry.js. Rules and background bands separate content;
   there are no cards on this surface. */

/* ── Layout primitives ─────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* A section that hangs off the primary cord. */
.strand {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.strand__cord {
  position: relative;
}

.strand__cord::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-hairline);
}

/* The pendant that hangs from the primary cord at each section. Its knots carry the
   section number in khipu notation, so it is drawn per section in the markup from
   khipu-geometry.js (cordLoose, w = 2.5). Color comes from this rule; the paper
   highlight arcs inside each knot must track the band behind them. */
.strand__pendant {
  position: absolute;
  left: 11.5px;
  top: 32px;
  width: 24px;
  height: auto;
  color: var(--ink-800);
}

.strand__pendant .pendant-hi { stroke: var(--surface-page); }
.band--inverse .strand__pendant .pendant-hi { stroke: var(--surface-inverse); }

.strand__num {
  position: absolute;
  left: 0;
  top: 72px;
  width: 46px;
  text-align: center;
  font: var(--type-mono);
  color: var(--text-muted);
}

.strand__body {
  padding: var(--space-20) var(--space-10) var(--space-20) 0;
  min-width: 0;
}

/* On a navy band the cord and knot invert. */
.band--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.band--inverse h2,
.band--inverse h3 {
  color: var(--text-inverse);
}

.band--inverse .strand__cord::before { background: var(--border-inverse); }
.band--inverse .strand__pendant { color: var(--paper-200); }
.band--inverse .strand__num { color: var(--text-inverse-muted); }

.band--sunken { background: var(--surface-sunken); }

/* ── Type helpers ──────────────────────────────────────────────────── */

.eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  display: block;
  margin-bottom: var(--space-5);
}

.band--inverse .eyebrow { color: var(--ochre-300); }

.h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); }
.h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); }
.h3 { font: var(--type-h3); }

.lead {
  font: var(--type-lead);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
}

.band--inverse .lead { color: var(--text-inverse-muted); }

.body { font: var(--type-body); color: var(--text-secondary); max-width: var(--measure); }
.band--inverse .body { color: var(--text-inverse-muted); }

.small { font: var(--type-small); color: var(--text-secondary); }
.mono { font: var(--type-mono); color: var(--text-muted); }

.stack > * + * { margin-top: var(--space-5); }

/* ── Navigation ────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper-100) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-800);
}

.nav__inner {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav__logo { display: flex; text-decoration: none; }
/* The record hangs directly below this and the system allows one khipu per view, so
   the nav lockup stays a signature rather than a second drawing — but a legible one. */
.nav__logo img { height: 52px; width: auto; display: block; }

.nav__links {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-left: auto;
}

.nav__cta { margin-left: var(--space-8); }

.nav__links a {
  font: var(--type-small);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: var(--transition-color);
}

.nav__links a:hover { border-bottom-color: var(--accent); color: var(--text-body); }

/* ── The record under the header ───────────────────────────────────── */

.record {
  background: var(--surface-page);
  overflow: hidden;
  line-height: 0;
}

/* Full width. Cropping the left (to give the fringe more room) can only be done by scaling the
   artwork up, which costs vertical space the first screen cannot spare. If the lopsided silhouette
   needs fixing, regenerate a shorter record from khipu-geometry.js rather than scaling this one. */
.record img { width: 100%; display: block; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero .strand__body { padding-top: var(--space-12); }

.hero h1 {
  font: var(--type-display);
  letter-spacing: var(--tracking-tight);
  max-width: 15ch;
}

/* Headline and lead sit side by side: the headline is 15ch, so stacking them left the right
   half of the first screen empty and pushed the call to action below the fold. */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: end;
}

.hero__side { max-width: 46ch; }

.hero__lead {
  font: var(--type-lead);
  color: var(--text-body);
  margin: 0;
}

.hero__note { margin-top: var(--space-6); }

.hero__actions {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-10);
  flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--weight-semibold) var(--size-sm) / 1 var(--font-sans);
  padding: 13px var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-color), transform var(--duration-instant) var(--ease-standard);
}

.btn--accent { background: var(--accent); color: var(--paper-100); }
.btn--accent:hover { background: var(--accent-hover); color: var(--paper-100); }

.btn--ghost { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--paper-200); color: var(--text-body); }

.btn--sm { font: var(--weight-semibold) var(--size-xs) / 1 var(--font-sans); padding: 10px var(--space-5); }

.btn:active { transform: translateY(1px); }

.link-arrow { font: var(--type-small); }

/* ── Definition rows: the card-free way to list things ─────────────── */

.rows {
  margin: var(--space-12) 0 0;
  border-top: 1px solid var(--ink-800);
}

.band--inverse .rows { border-top-color: var(--paper-200); }

.row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-10);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-hairline);
  align-items: baseline;
}

.band--inverse .row { border-bottom-color: var(--border-inverse); }

.row dt { font: var(--type-h3); color: var(--text-primary); }
.band--inverse .row dt { color: var(--text-inverse); }
.row dd { margin: 0; font: var(--type-body); color: var(--text-secondary); max-width: 58ch; }
.band--inverse .row dd { color: var(--text-inverse-muted); }

/* Services carry a longer body and a mono "what you get" line. */
.row--service dd .deliverable {
  display: block;
  margin-top: var(--space-3);
  font: var(--type-mono);
  color: var(--text-muted);
}

/* ── Stats ─────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-12);
  border-top: 1px solid var(--ink-800);
  padding-top: var(--space-8);
}

.band--inverse .stats { border-top-color: var(--paper-200); }

.stat__value {
  font: var(--weight-semibold) var(--size-3xl) / var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.band--inverse .stat__value { color: var(--text-inverse); }

.stat__label {
  display: block;
  margin-top: var(--space-3);
  font: var(--type-small);
  color: var(--text-secondary);
  max-width: 30ch;
}

.band--inverse .stat__label { color: var(--text-inverse-muted); }

/* ── Institution list ──────────────────────────────────────────────── */

.institutions {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-16);
  max-width: 720px;
}

.institutions li {
  font: var(--type-body);
  color: var(--text-secondary);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}

.band--inverse .institutions li {
  color: var(--text-inverse-muted);
  border-bottom-color: var(--border-inverse);
}

.institutions__note {
  margin-top: var(--space-5);
  max-width: 62ch;
}

.band--inverse .institutions__note { color: var(--text-inverse-muted); }

/* ── Contact ───────────────────────────────────────────────────────── */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-10);
  align-items: start;
}

.contact__address {
  font: var(--weight-semibold) var(--size-xl) / var(--leading-snug) var(--font-display);
}

/* The eyebrow above this is already clay; the address stays navy until hover. */
.contact__address a { color: var(--text-primary); text-decoration-color: var(--border-default); }
.contact__address a:hover { color: var(--accent); text-decoration-color: currentColor; }

.fit {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}

.fit li {
  font: var(--type-body);
  color: var(--text-secondary);
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--border-hairline);
}

.fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss-500);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.footer {
  background: var(--ink-900);
  color: var(--text-inverse);
}

.footer__inner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: var(--space-16) 0 var(--space-10);
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.footer__row img { height: 76px; width: auto; display: block; }

.footer__links {
  display: flex;
  gap: var(--space-8);
  font: var(--type-small);
}

.footer__links a { color: var(--text-inverse-muted); text-decoration: none; }
.footer__links a:hover { color: var(--paper-100); text-decoration: underline; }

.footer__meta { font: var(--type-mono); color: var(--text-inverse-muted); }

/* ── Skip link ─────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-800);
  color: var(--paper-100);
  padding: var(--space-3) var(--space-5);
  font: var(--type-small);
  z-index: 20;
}

.skip:focus { left: var(--space-4); top: var(--space-4); }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero__top,
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  .hero h1 { max-width: none; }

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

  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

  .institutions { grid-template-columns: minmax(0, 1fr); }

  .strand__body { padding-right: 0; }
}

@media (max-width: 720px) {
  /* The cord gutter collapses: the spine would eat a third of a phone screen. */
  .strand,
  .footer__inner { grid-template-columns: minmax(0, 1fr); }

  .strand__cord { display: none; }

  .strand__body { padding: var(--space-16) 0; }

  .container { padding: 0 var(--space-5); }

  :root { --size-5xl: 41px; --size-3xl: 32px; --size-2xl: 25px; }

  .nav__inner { height: 76px; }
  .nav__logo img { height: 46px; }
  .nav__links { gap: var(--space-5); }
  .nav__links a { font: var(--type-caption); }

  .stats { grid-template-columns: minmax(0, 1fr); }

  .footer__row img { height: 60px; }
}

@media (max-width: 420px) {
  /* The four links do not fit; the action does, so the page is never a dead end. */
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}