/* CHERTPRESS — additions on top of the shared chertiot.com / cherttt.com site styles (site.css, shell.css).
   Only what those sites do not have: the release card in the hero, products, the lineage strip,
   illustration gallery, stakeholder cards and the subpage blocks. Tokens only (chert-tokens.css). */

/* ---------------------------------------------------- hero: release card --- */
.cp-record { position: absolute; right: 0; bottom: calc(-78 * var(--u)); width: calc(244 * var(--u)); padding: 14px 16px; border-radius: var(--radius-card);
  border: 1px solid var(--chert-dark-border); background: color-mix(in srgb, var(--chert-dark-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-modal); animation: sx-float 7s ease-in-out infinite; }
.cp-record__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--chert-dark-muted); }
.cp-record__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chert-orange); animation: sx-blink 1.6s ease-in-out infinite; }
.cp-record__tag { margin-inline-start: auto; font-family: var(--font-ui); font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--chert-dark-border); }
.cp-record__steps { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 7px; }
.cp-record__steps li { position: relative; padding-inline-start: 22px; font-size: 13px; color: var(--chert-dark-muted); }
.cp-record__steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 1.5px solid var(--chert-dark-border); }
.cp-record__steps li.is-done { color: var(--chert-dark-text); }
.cp-record__steps li.is-done::before { background: var(--chert-success); border-color: var(--chert-success); }
.cp-record__steps li.is-now { color: var(--chert-dark-text); font-weight: 700; }
.cp-record__steps li.is-now::before { border-color: var(--chert-orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chert-orange) 25%, transparent); animation: sx-blink 1.6s ease-in-out infinite; }
.cp-record__foot { font-family: var(--font-mono); font-size: 11px; color: var(--chert-dark-muted); }
@media (max-width: 760px) { .cp-record { display: none; } }


/* ------------------------------------------------------------- doors --- */
.cp-doors { background: var(--chert-surface-alt); }
.cp-doors .sx-pillars { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cp-door { display: flex; flex-direction: column; }
.cp-door p { flex: 1; }
.cp-door__link, .cp-product__link { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm);
  color: var(--chert-ink); text-decoration: underline; text-decoration-color: var(--chert-orange); text-underline-offset: 4px; }
.cp-door__link:hover { text-decoration-color: var(--chert-orange-deep); }

/* ---------------------------------------------------------- products --- */
.cp-products { background: var(--chert-cream); }
.cp-products__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cp-product { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 20px; border: 1px solid var(--chert-border); background: var(--chert-surface);
  transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow), border-color var(--dur-slow), opacity .8s var(--ease), transform .8s var(--ease); }
.js .cp-product.sx-reveal { transition-delay: calc(var(--k, 0) * 90ms), 0s, 0s, calc(var(--k, 0) * 90ms), calc(var(--k, 0) * 90ms); }
.cp-product:hover { translate: 0 -4px; box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--chert-orange) 50%, var(--chert-border)); }
.cp-product__host { margin: 18px 0 2px; font-family: var(--font-mono); font-size: 12.5px; color: var(--chert-muted); direction: ltr; unicode-bidi: isolate; }
.cp-product h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.cp-product p:not(.cp-product__host) { margin: 0; color: var(--chert-muted); }

/* ----------------------------------------------------------- lineage --- */
.cp-lineage { background: var(--chert-surface); }
.cp-lineage__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); counter-reset: ln; }
.cp-lineage__step { position: relative; padding: 20px 18px; border-radius: var(--radius-card); border: 1px solid var(--chert-border); background: var(--chert-cream); counter-increment: ln; }
.cp-lineage__step::after { content: ""; position: absolute; top: 50%; inset-inline-end: -12px; width: 10px; height: 10px; margin-top: -5px;
  border-top: 2px solid var(--chert-orange-deep); border-right: 2px solid var(--chert-orange-deep); transform: rotate(45deg); }
.cp-lineage__step:last-child::after { display: none; }
.cp-lineage__step .sx-pillar__icon { width: 40px; height: 40px; border-radius: 12px; }
.cp-lineage__step b { display: block; margin: 12px 0 2px; font-size: 15px; }
.cp-lineage__step small { display: block; color: var(--chert-muted); font-size: 13px; }
.cp-lineage__note { max-width: 68ch; margin: var(--space-6) auto 0; text-align: center; color: var(--chert-muted); }
@media (max-width: 700px) { .cp-lineage__step::after { display: none; } }

/* ------------------------------------------------------ illustrations --- */
.cp-gallery { color: var(--chert-dark-text); background:
  radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--chert-orange) 14%, transparent), transparent 70%), var(--chert-dark); }
.cp-gallery .sx-eyebrow { color: var(--chert-orange); }
.cp-gallery__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); max-width: 1180px; margin-inline: auto; }
.cp-shot { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--chert-dark-border); background: var(--chert-dark-surface); box-shadow: var(--shadow-modal);
  transition: translate var(--dur-slow) var(--ease), border-color var(--dur-slow), opacity .8s var(--ease), transform .8s var(--ease); }
.js .cp-shot.sx-reveal { transition-delay: 0s, 0s, calc(var(--k, 0) * 110ms), calc(var(--k, 0) * 110ms); }
.cp-shot:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--chert-orange) 55%, var(--chert-dark-border)); }
.cp-shot__frame { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--chert-dark-border); }
.cp-shot__frame span { width: 9px; height: 9px; border-radius: 50%; background: var(--chert-dark-border); }
.cp-shot__frame em { margin-inline-start: auto; font-style: normal; font-size: 11px; color: var(--chert-dark-muted); padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--chert-dark-border); }
.cp-shot svg { display: block; width: 100%; height: auto; background: var(--chert-cream); }
.cp-shot figcaption { padding: 12px 16px 14px; font-size: 14px; color: var(--chert-dark-muted); }

/* illustration palette (SVG classes) */
.il-paper { fill: var(--chert-surface); } .il-cream { fill: var(--chert-cream); } .il-alt { fill: var(--chert-surface-alt); }
.il-line { fill: var(--chert-border-strong); } .il-ink { fill: var(--chert-ink); } .il-muted { fill: var(--chert-muted); }
.il-tan { fill: var(--chert-tan); } .il-orange { fill: var(--chert-orange); } .il-tint { fill: var(--chert-orange-tint); }
.il-ok { fill: var(--chert-success); } .il-warn { fill: var(--chert-warning); } .il-err { fill: var(--chert-error); }
.il-stroke { fill: none; stroke: var(--chert-border-strong); stroke-width: 1.5; } .il-stroke-ink { fill: none; stroke: var(--chert-ink); stroke-width: 2; }
.il-dash { fill: none; stroke: var(--chert-orange-deep); stroke-width: 2; stroke-dasharray: 5 4; }
.il-t { font-family: var(--font-ui); fill: var(--chert-ink); } .il-ar { font-family: var(--font-ar); fill: var(--chert-ink); }
.il-mono { font-family: var(--font-mono); fill: var(--chert-ink); } .il-tm { fill: var(--chert-muted); }

/* ---------------------------------------------------- stakeholder cards --- */
.cp-pages { background: var(--chert-cream); }
.cp-pages__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.cp-pagecard { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; border: 1px solid var(--chert-border); background: var(--chert-surface);
  color: var(--chert-ink); text-decoration: none; transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow), border-color var(--dur-slow); }
.cp-pagecard:hover { translate: 0 -4px; box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--chert-orange) 50%, var(--chert-border)); }
.cp-pagecard b { margin-top: 14px; font-size: 18px; }
.cp-pagecard small { color: var(--chert-muted); font-size: var(--fs-sm); }
.cp-pagecard .sx-pillar__icon { width: 44px; height: 44px; border-radius: 12px; }

/* ---------------------------------------------- architecture grid areas ---
   site.css names its grid areas after chertiot's layer ids; map the CHERTPRESS layers onto them:
   bands top→bottom in the centre column, identity rail on the left, operations on the right. */
@media (min-width: 1100px) {
  .sx-layer--contribute { grid-area: devices; } .sx-layer--produce { grid-area: connect; }
  .sx-layer--release { grid-area: platform; } .sx-layer--publish { grid-area: apps; }
}

/* ============================================================ subpages === */
.cp-pagehero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + var(--space-9)) 0 var(--space-9); color: var(--chert-dark-text);
  background:
    radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--chert-orange-deep) 24%, transparent), transparent 55%),
    radial-gradient(ellipse at 6% 96%, color-mix(in srgb, var(--chert-tan) 14%, transparent), transparent 50%),
    var(--chert-dark); }
.cp-pagehero .sx-hero__field { -webkit-mask-image: linear-gradient(100deg, transparent 20%, black 80%); mask-image: linear-gradient(100deg, transparent 20%, black 80%); }
.cp-pagehero__inner { max-width: 820px; }
.cp-pagehero .sx-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.cp-pagehero h1 { margin: 0 0 var(--space-5); font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; }
.cp-pagehero p.cp-pagehero__lead { margin: 0; max-width: 64ch; font-size: var(--fs-lg); color: var(--chert-dark-muted); }
.cp-crumbs { margin: 0 0 var(--space-5); font-size: var(--fs-sm); color: var(--chert-dark-muted); }
.cp-crumbs a { color: inherit; }
.cp-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-6); }
.cp-toc a { padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--chert-dark-muted) 45%, transparent); color: var(--chert-dark-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.cp-toc a:hover { border-color: var(--chert-orange); }

.cp-sec:nth-of-type(odd) { background: var(--chert-cream); }
.cp-sec:nth-of-type(even) { background: var(--chert-surface); }
.cp-sec:nth-of-type(even) .sx-pillar { background: var(--chert-cream); }
.cp-sec--code { color: var(--chert-dark-text); background: var(--chert-dark) !important; }

.cp-table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--chert-border); background: var(--chert-surface); box-shadow: var(--shadow-card); }
.cp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cp-table th { padding: 12px 16px; background: var(--chert-ink); color: var(--chert-cream); font-weight: 700; text-align: start; }
.cp-table td { padding: 14px 16px; border-top: 1px solid var(--chert-border); vertical-align: top; }
.cp-table tr:nth-child(even) td { background: var(--chert-surface-alt); }
.cp-table tr:hover td { background: var(--chert-orange-tint); }
.cp-table td:first-child { font-weight: 700; }
.cp-table code, .cp-mono { font-family: var(--font-mono); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }

.cp-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: 14px; counter-reset: st; }
.cp-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; border-radius: 20px;
  border: 1px solid var(--chert-border); background: var(--chert-surface); counter-increment: st; }
.cp-sec:nth-of-type(even) .cp-step { background: var(--chert-cream); }
.cp-step::before { content: counter(st, decimal-leading-zero); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: var(--chert-ink); color: var(--chert-orange); font-family: var(--font-mono); font-weight: 700; }
.cp-step h3 { margin: 4px 0 6px; font-size: 19px; }
.cp-step p { margin: 0; color: var(--chert-muted); }

.cp-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cp-list__item { padding: 26px; border-radius: 20px; border: 1px solid var(--chert-border); background: var(--chert-surface); }
.cp-sec:nth-of-type(even) .cp-list__item { background: var(--chert-cream); }
.cp-list__item h3 { margin: 16px 0 10px; font-size: 19px; line-height: 1.3; }
.cp-list__item ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cp-list__item li { position: relative; padding-inline-start: 20px; color: var(--chert-muted); }
.cp-list__item li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--chert-orange); }

.cp-code { max-width: 820px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--chert-dark-border); background: var(--chert-dark-surface); box-shadow: var(--shadow-modal); }
.cp-code pre { margin: 0; padding: 22px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--chert-dark-text); direction: ltr; text-align: left; }
.cp-code figcaption { padding: 12px 18px 14px; border-top: 1px solid var(--chert-dark-border); font-size: 13.5px; color: var(--chert-dark-muted); }

.cp-next { background: var(--chert-surface-alt); }

/* two-column grids for 2- and 4-item groups (avoids a lone orphan card) */
@media (min-width: 760px) { .cp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; } }