/* layouts used by the product, architecture, whitepaper, audit,
   collections and history pages */

/* the same soft green glow the home hero sits on, so an inner page opens in the
   same world rather than on a grey gradient */
.page-hero {
  padding: 92px 0 84px;
  background:
    radial-gradient(820px 460px at 72% 8%, #dff6ec 0%, rgba(223, 246, 236, 0) 68%),
    radial-gradient(900px 400px at 16% -14%, #eef9f4 0%, rgba(238, 249, 244, 0) 70%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-hero-center { text-align: center; }
.page-hero-center .lede { margin: 20px auto 0; }
.page-hero-center .cta-row { justify-content: center; }
/* A centred hero headline is two lines from 1280 up, so its scale is planned
   around the longest of the two, which is always the accent line. */
.page-hero-center h1 { max-width: 25ch; margin: 0 auto; font-size: clamp(2.2rem, 4.3vw, 3.45rem); }
/* A split hero gives the headline half the page, so its scale is planned around
   that column: two lines at 1440, not three. */
.page-hero .two-col h1 { font-size: clamp(2.2rem, 3.9vw, 3.1rem); }

.page-hero-dark {
  background:
    radial-gradient(760px 340px at 82% -10%, rgba(22, 191, 134, .22) 0%, rgba(22, 191, 134, 0) 70%),
    var(--dark);
  color: #fff;
  border-bottom: 0;
}
.page-hero-dark .lede, .page-hero-dark .muted { color: var(--dark-text); }
.page-hero-dark .eyebrow { color: var(--accent); }
.page-hero-dark .accent-word { color: var(--accent); }
.page-hero-dark .btn-line { color: #fff; border-color: #3c4d49; }
.page-hero-dark .btn-line:hover { border-color: #fff; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ---------- pipeline graph ---------- */

.graph {
  border: 1px solid var(--dark-line);
  border-radius: var(--r-l);
  background: linear-gradient(160deg, #101614, #0b100f);
  padding: 18px;
  font-family: var(--mono);
}
.graph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark-dim);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dark-line);
}
.graph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 0; }
.graph-node {
  border: 1px solid var(--dark-line);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .03);
  padding: 13px 14px;
  display: grid;
  gap: 4px;
}
.graph-node .k { font-size: .56rem; letter-spacing: .14em; color: #7c918a; text-transform: uppercase; }
.graph-node b { font-size: .84rem; color: #fff; font-family: var(--font); letter-spacing: -.01em; }
.graph-node .v { font-size: .64rem; color: var(--dark-dim); }
.graph-node[data-active] { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(22, 191, 134, .25); }
.graph-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark-dim);
}
@media (max-width: 560px) { .graph-grid { grid-template-columns: 1fr; } }

.factbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--paper); }
.factbar > div { padding: 18px 20px; border-right: 1px solid var(--line); }
.factbar > div:last-child { border-right: 0; }
.factbar dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.factbar dd { margin: 0; font-weight: 600; font-size: .92rem; }
@media (max-width: 900px) { .factbar { grid-template-columns: repeat(3, 1fr); } .factbar > div { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .factbar { grid-template-columns: repeat(2, 1fr); } }

/* ---------- layer and stage cards ---------- */

.layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--paper); }
.layers article { padding: 18px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.layers article:last-child { border-right: 0; }
.layers .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .layers { grid-template-columns: 1fr 1fr; } .layers article { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } }
@media (max-width: 560px) { .layers { grid-template-columns: 1fr; } .layers article { border-right: 0; } }

.stage { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage-k { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stage-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-io { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--ink-2); margin-top: auto; }
.stage-io b { display: block; color: var(--ink); font-size: .76rem; }
.stage-io .k { font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- validation console ---------- */

.console { background: var(--dark); border: 1px solid var(--dark-line); border-radius: var(--r-m); padding: 18px; font-family: var(--mono); font-size: .72rem; color: #a9bab4; display: grid; gap: 8px; }
.console-head { display: flex; justify-content: space-between; align-items: center; color: var(--dark-dim); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--dark-line); }
.console-line { display: flex; gap: 10px; }
/* the line numbers are text, so they carry body contrast on both grounds this
   console uses: the ink panel and the tinted pass line. #5f736c measured 3.73:1
   and 3.42:1 on those two. */
.console-line i { font-style: normal; color: #7d8d87; }
.console-line.pass { color: var(--accent); border: 1px solid rgba(22, 191, 134, .35); border-radius: 7px; padding: 8px 10px; background: rgba(22, 191, 134, .08); }
.console-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--dark-line); font-size: .62rem; color: var(--dark-dim); }

/* ---------- quality gates ---------- */

.gates { display: grid; }
.gates > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.gates > div:last-child { border-bottom: 1px solid var(--line); }
.gates .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.tick { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--accent-deep); display: grid; place-items: center; font-size: .76rem; }

/* ---------- review matrix ---------- */

.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.matrix { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .88rem; }
.matrix thead th { background: var(--dark); color: #fff; text-align: left; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 13px 18px; font-weight: 500; }
.matrix td { padding: 15px 18px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.matrix td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------- whitepaper ---------- */

.wp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.wp-grid > * { min-width: 0; }
.toc { position: sticky; top: 92px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; background: var(--paper); }
.toc b { display: block; margin-bottom: 14px; font-size: .9rem; }
/* contents links only. Without the :not(.btn) these beat .btn-primary on
   specificity and repaint the call to action in muted grey, which measures
   3.04:1 on tangerine. A button inside the list keeps its own colour. */
.toc a:not(.btn) { display: block; padding: 8px 0; font-size: .82rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.toc a:not(.btn):hover { color: var(--accent-deep); }
.wp-section { padding: 0 0 48px; }
.wp-section + .wp-section { border-top: 1px solid var(--line); padding-top: 44px; }
.wp-section h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 18px; }
.wp-section h3 { margin: 24px 0 8px; }
.wp-section p { color: var(--ink-2); margin-bottom: 12px; }
.wp-section ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.wp-section li { margin-bottom: 8px; }
.wp-num { font-family: var(--mono); font-size: .68rem; color: var(--accent-deep); letter-spacing: .1em; }
pre.code { background: var(--dark); color: #b7cbc3; border-radius: var(--r-m); padding: 20px; overflow-x: auto; font-family: var(--mono); font-size: .76rem; line-height: 1.7; margin: 0 0 12px; }
.arch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; }
.arch-row div { border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; }
.arch-row .k { font-family: var(--mono); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
.arch-row b { font-size: .84rem; }
@media (max-width: 1000px) { .wp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .toc { position: static; } }
@media (max-width: 640px) { .arch-row { grid-template-columns: 1fr 1fr; } }

/* ---------- history ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; background: var(--paper); }
.tile .k { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tile .v { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin: 6px 0 4px; }
.tile .h { font-size: .76rem; color: var(--ink-2); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

.record { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.record img, .record .ph { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: var(--ground-2); display: grid; place-items: center; }
.record b { font-size: .92rem; display: block; }
.record .meta { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); word-break: break-all; }

/* ---------- collections ---------- */

.dir-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dir-card .art { position: relative; }
.dir-card .art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dir-card .idx { position: absolute; top: 12px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; font-family: var(--mono); font-size: .62rem; }
.dir-card .kind { position: absolute; left: 12px; bottom: 12px; background: var(--ink); color: #fff; }
.dir-card .body { padding: 16px; display: grid; gap: 8px; align-content: start; flex: 1; }
.dir-card .foot { padding: 14px 16px; border-top: 1px solid var(--line); }

/* ---------- pinned pipeline (/how-it-works) ----------
   The rail holds still while the six stages pass it. position: sticky does the
   holding, an observer in site.js says which stage is in view, and the bar
   reads one custom property. Nothing here listens to scroll and nothing
   animates a layout property. */

.pin-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
}
.pin-rail { position: sticky; top: 104px; }
.pin-lede { margin-top: 16px; max-width: 38ch; }
.pin-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.pin-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-s);
  font-size: .9rem;
  color: var(--ink-3);
  transition: color var(--t-mid) var(--ease), background var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.pin-steps .pin-k {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-3);
  transition: color var(--t-mid) var(--ease);
}
.pin-steps li[data-done] { color: var(--ink-2); }
.pin-steps li[data-current] {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
  transform: translateX(4px);
}
.pin-steps li[data-current] .pin-k { color: var(--accent-deep); }

.pin-progress {
  margin-top: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.pin-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--pin-progress, 0));
  transition: transform var(--t-slow) var(--ease);
}

.pin-stages { display: grid; gap: 18px; }
.pin-stages .stage { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .pin-stages .stage { opacity: .42; }
html.js .pin-stages .stage[data-current] { opacity: 1; }

@media (max-width: 900px) {
  .pin-grid { grid-template-columns: 1fr; gap: 28px; }
  .pin-rail { position: static; }
  .pin-steps { display: none; }
  .pin-progress { display: none; }
  html.js .pin-stages .stage { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .pin-stages .stage { opacity: 1; }
}