/* ============================================================
   inner.css — shared layout for content pages
   (SACER sub-pages, Approach, Contact).
   ============================================================ */

/* ---------- Page hero ---------- */
.page-hero{ padding-block:var(--sp-6) var(--sp-5); border-bottom:1px solid var(--rule); }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--sage); margin-bottom:26px; }
.breadcrumb a{ color:var(--slate); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .sep{ color:var(--mist); }
.page-hero__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(32px,5vw,72px); align-items:end; }
.page-hero h1{ font-size:var(--fs-display); max-width:16ch; }
.page-hero .lead{ margin-top:24px; max-width:46ch; }
.page-hero__meta{ border-left:1px solid var(--rule); padding-left:26px; }
.page-hero__meta dt{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.page-hero__meta dd{ margin:6px 0 20px; font-size:15.5px; color:var(--text-soft); }
.page-hero__meta dd:last-child{ margin-bottom:0; }

/* ---------- Prose ---------- */
.prose{ max-width:var(--maxw-tight); }
.prose p + p{ margin-top:20px; }
.prose .lead{ color:var(--text-soft); }

/* ---------- Spec / capability cards ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius-sm); overflow:hidden; margin-top:42px; }
.spec-card{ background:var(--paper); padding:30px 28px 34px; display:flex; flex-direction:column; min-height:210px; }
.spec-card .sn{ font-family:var(--mono); font-size:12px; color:var(--peri-ink); letter-spacing:.08em; }
.spec-card h3{ font-size:var(--fs-h3); font-weight:400; margin-top:26px; }
.spec-card p{ font-size:15px; color:var(--text-soft); margin-top:12px; line-height:1.55; }
.spec-card .tag{ margin-top:auto; padding-top:20px; }
.spec-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.spec-tag.is-judg{ color:var(--peri-ink); }

/* ---------- Steps (numbered) ---------- */
.steps{ counter-reset:step; margin-top:42px; border-top:1px solid var(--rule); }
.steps li{ counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:28px; padding:30px 4px; border-bottom:1px solid var(--rule); align-items:start; }
.steps li::before{ content:counter(step,decimal-leading-zero); font-family:var(--mono); font-size:13px; color:var(--peri-ink); letter-spacing:.08em; padding-top:5px; }
.steps h3{ font-size:var(--fs-h3); font-weight:400; }
.steps p{ color:var(--text-soft); margin-top:10px; max-width:60ch; }

/* ============================================================
   Interactive pipeline (how-it-works)
   ============================================================ */
.pipe-wrap{
  background:var(--ink); border-radius:var(--radius); padding:clamp(28px,4vw,52px); margin-top:42px; color:var(--text-on-dark); position:relative; overflow:hidden;
  /* page-scoped cadence for the execution-trace run choreography below —
     one tick per element, left to right (see the reveal-keyed animation block).
     Deliberately NOT --reveal-stagger (70ms): this is the narrative "machine
     tick" of the execution trace (with a held beat at reason), not the site's
     generic list-cascade stagger. */
  --pipe-cadence: var(--dur-quick);
  /* the child cadence below starts one tick after 0 so nothing runs inside
     the wrapper's own (quick, separate) reveal transition — see the
     .pipe-wrap[data-reveal] override and the nth-child delays below. */
  --pipe-run-start: var(--pipe-cadence);
}
.pipe-wrap__grid{ position:absolute; inset:0; opacity:.4; background-image:linear-gradient(90deg,var(--rule-on-dark) 1px,transparent 1px); background-size:46px 100%; -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent); }
.pipe-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; position:relative; }
.pipe-head .eyebrow{ color:var(--peri-deep); }
.pipe-head .mono{ font-size:12px; color:var(--sage); }

.pipe{ display:flex; align-items:stretch; gap:0; margin-top:30px; position:relative; }
.pipe__step{
  /* flex:1 1 0 (not the shorthand flex:1, which keeps flex-basis:auto) plus
     min-width:0 lets all five steps compress to truly equal widths — with
     flex-basis:auto, min-width:auto stops a step from shrinking below its
     own min-content (the ps-kind labels differ in length: "deterministic"
     vs "judgment"), so the row's natural widths never actually equalized
     and the last step got clipped against .pipe-wrap's overflow:hidden. */
  flex:1 1 0; min-width:0;
  background:rgba(191,191,184,.04); border:1px solid var(--rule-on-dark); border-radius:var(--radius-sm);
  padding:18px 14px 16px; cursor:pointer; text-align:left; color:var(--text-on-dark-soft); position:relative;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.pipe__step:hover{ transform:translateY(calc(var(--move-sm) * -.375)); color:#fff; }
/* The three card lines are display:block — as inline spans they'd render as
   one unbreakable run (01parseDETERMINISTIC), their margin-tops silently
   ignored, and that run's min-content width is what used to blow the row
   past .pipe and clip the last card. Block stacking is the intended layout
   (number / name / kind) and shrinks min-content to the widest single word.
   The ≤620px breakpoint re-lays these out as a flex row (margin-tops zeroed
   there), which block display doesn't disturb. */
.pipe__step .ps-n{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--sage); }
.pipe__step .ps-name{ display:block; font-family:var(--mono); font-size:15px; margin-top:8px; color:var(--mist); letter-spacing:.02em; }
.pipe__step .ps-kind{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:12px; color:var(--slate);
  /* ellipsis backstop only — with equal-width cards, "deterministic" has
     ~2-4px slack at the tightest desktop widths (~901-910px viewport) */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pipe__step[aria-selected="true"]{ background:rgba(191,191,184,.08); border-color:var(--sage); color:#fff; }
.pipe__step[aria-selected="true"] .ps-name{ color:#fff; }
.pipe__step.is-judg{ border-color:rgba(154,166,238,.45); }
.pipe__step.is-judg .ps-name{ color:var(--peri); }
.pipe__step.is-judg .ps-kind{ color:var(--peri-deep); }
.pipe__step.is-judg[aria-selected="true"]{ background:rgba(154,166,238,.14); border-color:var(--peri-deep); }
/* Glow lives on a ::after (not a box-shadow transition — paint-triggering
   and disallowed) so only its opacity animates. Selecting eases the glow in
   slowly after the same held beat as the panel text; deselecting is quick
   and undelayed — leaving is unceremonious. */
.pipe__step.is-judg::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 30px -8px rgba(154,166,238,.6); opacity:0;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.pipe__step.is-judg[aria-selected="true"]::after{
  opacity:1;
  transition:opacity var(--dur-slow) var(--ease-emphasized) var(--dur-quick);
}
.pipe__arrow{ display:flex; align-items:center; padding:0 10px; color:var(--slate); font-family:var(--mono); flex:none; }

.pipe-detail{ margin-top:26px; padding-top:24px; border-top:1px solid var(--rule-on-dark); display:grid; grid-template-columns:auto 1fr; gap:26px; position:relative; min-height:96px; }
.pipe-detail__badge{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--rule-on-dark); border-radius:5px; color:var(--sage); height:fit-content; white-space:nowrap; }
.pipe-detail__badge.is-judg{ color:var(--peri); border-color:var(--peri-deep); }
.pipe-detail h3{ font-size:var(--fs-h3); font-weight:300; color:#fff; }
.pipe-detail p{ color:var(--text-on-dark-soft); margin-top:10px; max-width:56ch; }

/* Execution-trace run: plays once, left -> right, when .pipe-wrap is
   revealed by the site-wide IntersectionObserver (site.js adds .is-visible
   to [data-reveal] targets; .pipe-wrap carries data-reveal). Base state
   outside this query — and before .is-visible — is the finished, settled
   stepper (no hidden opacity rule of its own), so JS-off and
   reduced-motion users simply see it rendered; the hidden "from" state
   exists only inside the animation's own delay window (fill:both),
   mirroring sacer.css's dgPop pattern. Four deterministic steps share one
   identical, mechanical cadence; `reason` gets one extra tick (the held
   beat) before a slower, more considered entrance. */
@media (prefers-reduced-motion:no-preference){
  /* The wrapper's own reveal (base.css's shared [data-reveal] rule: 420ms
     opacity+translateY) would otherwise still be mid-fade when the first
     cadence ticks below start, reading mushier than the rest of the run.
     Override it to a quick, opacity-only settle with no transform travel —
     the surface appears fast and settled, then the cadence-driven children
     run on top of it. Scoped exactly like base.css's guard (`.js` ancestor
     only) so JS-off users still get the plain, visible, settled markup. */
  .js .pipe-wrap[data-reveal]{
    transform:none;
    transition:opacity var(--dur-quick) var(--ease-standard);
  }

  /* fill is `backwards`, not `both`: backwards holds the hidden from-state
     through the delay window (the cadence), but the animation must stop
     asserting values once finished — a forwards fill would keep pinning
     transform at the animation cascade origin forever (.is-visible is never
     removed), which outranks and permanently masks the :hover lift above.
     The to-state equals the natural computed style, so nothing visibly
     changes when the fill releases. */
  .js .pipe-wrap.is-visible .pipe__step{
    animation:pipeStepRun var(--dur-base) var(--ease-standard) backwards;
  }
  .js .pipe-wrap.is-visible .pipe__arrow{
    animation:pipeArrowRun var(--dur-base) var(--ease-standard) backwards;
  }
  .js .pipe-wrap.is-visible .pipe__step.is-judg{
    animation-duration:var(--dur-slow);
    animation-timing-function:var(--ease-emphasized);
  }

  /* one cadence tick per element, DOM order, offset by --pipe-run-start (one
     extra tick) so nothing starts before the wrapper itself has settled;
     reason (5th child) still waits an extra tick on top of that — the held
     beat — before its slower entrance plays. Held-beat structure is
     byte-identical to before, just shifted as a whole by --pipe-run-start. */
  .js .pipe-wrap.is-visible .pipe > *:nth-child(1){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 0); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(2){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 1); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(3){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 2); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(4){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 3); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(5){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 5); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(6){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 6); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(7){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 7); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(8){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 8); }
  .js .pipe-wrap.is-visible .pipe > *:nth-child(9){ animation-delay:calc(var(--pipe-run-start) + var(--pipe-cadence) * 9); }
}
@keyframes pipeStepRun{
  from{ opacity:0; transform:translateY(var(--move-sm)); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pipeArrowRun{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- Two-up (adopt / license) ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:42px; }
.duo__card{ border:1px solid var(--rule); border-radius:var(--radius); padding:36px 34px; background:var(--paper-raised); display:flex; flex-direction:column; }
.duo__card .dn{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--peri-ink); }
.duo__card h3{ font-size:var(--fs-h2); font-weight:300; margin-top:20px; }
.duo__card p{ color:var(--text-soft); margin-top:16px; }
.duo__card .who{ font-family:var(--mono); font-size:12px; color:var(--text-mute); margin-top:24px; padding-top:18px; border-top:1px solid var(--rule); }

/* ---------- End CTA (shared) ---------- */
.endcta{ background:var(--ink); color:var(--text-on-dark); }
.endcta .container{ padding-block:var(--sp-7); display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.endcta h2{ font-size:var(--fs-h1); color:#fff; max-width:18ch; }
.endcta p{ color:var(--text-on-dark-soft); margin-top:14px; max-width:42ch; }
.endcta .btn--solid{ background:var(--paper); color:var(--ink); }
.endcta .btn--solid:hover{ background:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .page-hero__grid{ grid-template-columns:1fr; align-items:start; }
  .page-hero__meta{ border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:6px 32px; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
  .pipe{ flex-wrap:wrap; gap:10px; }
  .pipe__step{ flex:1 1 40%; }
  .pipe__arrow{ display:none; }
  .duo{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .page-hero{ padding-block:var(--sp-5) var(--sp-3); }
  .spec-grid{ grid-template-columns:1fr; }
  .pipe{ flex-direction:column; gap:10px; }
  .pipe__step{ flex:1 1 auto; display:flex; align-items:baseline; gap:14px; }
  .pipe__step .ps-name{ margin-top:0; flex:1; }
  .pipe__step .ps-kind{ margin-top:0; }
  .pipe-detail{ grid-template-columns:1fr; gap:14px; }
  .endcta .container{ flex-direction:column; align-items:flex-start; }
}