/* Living Print v3 decorative motion.
   Static identity first. Every motion target contains decoration only. */
:root {
  --motion-css-ready: 1;
  --motion-ease: cubic-bezier(.22,.75,.24,1);
  --motion-hero-ms: 720;
  --motion-register-ms: 420;
  --motion-proof-ms: 520;
  --motion-trace-ms: 540;
  --motion-spread-ms: 560;
  --motion-frame-ms: 500;
  --motion-close-ms: 420;
  --motion-seam-ms: 620;
  --motion-lite-ms: 340;
  --folio-size: 3.5rem;
  --seam-size: clamp(4rem, 8vw, 7rem);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.menu-panel ol { list-style: none; padding: 0; margin: 0; }
.menu-folio { font-family: var(--serif); font-style: italic; min-width: 2rem; }
.chapter { padding-block-start: 0; }
.chapter-content { padding-block-start: clamp(1.75rem,4vw,4rem); }
.chapter-heading { align-items: center; }
.chapter-marker { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.folio-label { display: grid; gap: .1rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.folio-code { font-family: var(--serif); font-style: italic; text-transform: none; font-size: .95rem; letter-spacing: 0; }
.folio-sigil { position: relative; width: var(--folio-size); height: var(--folio-size); flex: 0 0 var(--folio-size); color: var(--ink); }
.folio-base, .folio-echo { position: absolute; inset: 0; }
.folio-base::before, .folio-echo::before {
  content: ''; position: absolute; inset: 9px;
  border: 2px solid currentColor; border-right-color: transparent;
}
.folio-base::after, .folio-echo::after {
  content: ''; position: absolute; inset-inline: 0; top: 50%;
  height: 2px; background: currentColor; transform: rotate(-7deg);
}
.folio-echo { color: var(--red); }
/* Intentional static misregistration lives INSIDE the animated wrapper. */
.folio-echo::before { translate: 3px 2px; }
.folio-echo::after { translate: 3px 2px; }
.folio-sigil[data-folio="B"] :is(.folio-base,.folio-echo)::before { border-width: 6px; border-right-color: currentColor; border-radius: 50%; }
.folio-sigil[data-folio="C"] :is(.folio-base,.folio-echo)::before { border-right-color: currentColor; border-bottom-color: transparent; transform: rotate(-7deg); }
.folio-sigil[data-folio="E"] :is(.folio-base,.folio-echo)::before { inset: 12px 2px; border-left: 0; border-right: 0; transform: rotate(-12deg); }
.folio-sigil[data-folio="F"] :is(.folio-base,.folio-echo)::before { inset: 8px 14px 8px 4px; box-shadow: 8px 5px 0 -2px var(--paper), 8px 5px 0 0 currentColor; }
.folio-sigil[data-folio="G"] :is(.folio-base,.folio-echo)::before { inset: 12px 4px; transform: rotate(90deg); border-right-color: currentColor; border-left-color: transparent; }
.folio-sigil[data-folio="H"] :is(.folio-base,.folio-echo)::before { border-radius: 50% 50% 0 0; border-right-color: currentColor; border-bottom: 0; }
.folio-sigil[data-folio="I"] :is(.folio-base,.folio-echo)::before { inset: 8px; border-right-color: currentColor; border-width: 1px 1px 5px; }
.proof-chapter .folio-sigil { color: var(--paper); }
.proof-chapter .folio-echo { color: var(--blush); }

/* A seam is normal document flow, never a pinned/fixed overlay.
   Keep overflow off section/main/body: only the decorative window clips. */
.chapter-seam {
  --seam-from: var(--paper); --seam-to: var(--paper);
  --seam-x: -24px; --seam-scale: .88; --seam-angle: 0deg;
  position: relative; height: var(--seam-size); color: var(--ink);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--seam-from) 0 50%, var(--seam-to) 50% 100%);
}
.seam-window {
  position: absolute; inset-block: 0;
  inset-inline: var(--gutter); max-width: var(--measure); margin-inline: auto;
  overflow: hidden; overflow: clip;
}
.seam-art {
  position: absolute; top: calc(50% - 1.5rem); left: 1rem;
  width: min(calc(100% - 2rem), 56rem); height: 3rem;
  transform-origin: 0 50%; transform: none;
}
.seam-art::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1.1rem;
  height: .4rem; background: currentColor;
}
.seam-art::after {
  content: ''; position: absolute; left: 36%; width: 42%; top: .8rem;
  height: .4rem; background: var(--red); transform: rotate(-2deg);
}
#positioning .chapter-seam { --seam-x: -32px; --seam-scale: .88; --seam-angle: -1deg; }
#proof .chapter-seam { --seam-to: var(--ink); --seam-x: 24px; --seam-scale: .82; color: var(--blush); }
#proof .seam-art::before { height: 1rem; top: .8rem; background: var(--red); }
#cases .chapter-seam { --seam-from: var(--ink); --seam-x: -24px; --seam-scale: .86; --seam-angle: -.75deg; color: var(--red); }
#cases .seam-art::before { background: none; border: 2px solid currentColor; height: 2.4rem; top: .2rem; border-bottom: 0; }
#distribution .chapter-seam { --seam-to: var(--blush); --seam-x: -28px; --seam-scale: .80; }
#distribution .seam-art::after { width: 65%; left: 12%; top: 1.9rem; transform: none; }
#platforms-partners .chapter-seam { --seam-from: var(--blush); --seam-x: 24px; --seam-scale: .84; }
#platforms-partners .seam-art::before { height: 1.8rem; top: .2rem; width: 46%; background: none; border: 2px solid currentColor; }
#platforms-partners .seam-art::after { height: 1.8rem; top: .6rem; left: 48%; width: 46%; background: none; border: 2px solid var(--red); transform: none; }
#collaboration .chapter-seam { --seam-to: #e2e1d9; --seam-x: -20px; --seam-scale: .88; --seam-angle: -.5deg; }
#collaboration .seam-art::after { left: 49%; width: 2px; height: 2.5rem; top: .2rem; transform: none; }
#team .chapter-seam { --seam-from: #e2e1d9; --seam-x: 20px; --seam-scale: .90; --seam-angle: .5deg; }
#team .seam-art::before { height: 2.5rem; top: .2rem; border: 2px solid currentColor; border-bottom: 0; background: none; }
#contact .chapter-seam { --seam-x: -16px; --seam-scale: .92; }
#contact .seam-art::after { width: 1.5rem; height: 1.5rem; left: calc(100% - 1.5rem); top: .25rem; background: none; border: 2px solid var(--red); transform: none; }
.contact-chapter { border-top: 0; }
.proof-rule-cue { position: relative; height: 1.5rem; margin-block: 1rem; overflow: hidden; }
.proof-rule-ink { display: block; width: 100%; height: 4px; background: var(--blush); transform-origin: 0 50%; }
.trace-cue { position: absolute; bottom: .6rem; left: .6rem; width: 24%; height: .5rem; }
.trace-cue .media-trace { position: static; display: block; width: 100%; height: .35rem; transform-origin: 0 50%; }
.distribution-register-ink { display: grid; gap: .6rem; }
.portrait-placeholder { position: relative; }
.portrait-cue { position: absolute; inset-inline-start: .6rem; bottom: .6rem; width: 2rem; height: 1rem; }
.portrait-mark { display: block; width: 100%; height: 100%; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--red); }
[data-motion-decor] { pointer-events: none; transform: none; }

/* No ambient fallback: ALL named-timeline requirements must pass.
   Only the coordinator's <=2 leased seams receive animation-name. */
@supports (animation-timeline: view()) and (view-timeline-name: --lp-seam) and (view-timeline-inset: 15% 15%) and (animation-range: cover 0% cover 75%) and (animation-duration: auto) {
  .chapter-seam { view-timeline-name: --lp-seam; view-timeline-axis: block; view-timeline-inset: 15% 15%; }
  html[data-effects="on"][data-scroll-effects="on"] .chapter-seam[data-seam-active] .seam-art {
    animation-name: lp-seam-register;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timeline: --lp-seam;
    animation-range: cover 0% cover 75%;
  }
}
@keyframes lp-seam-register {
  from { transform: translateX(var(--seam-x)) scaleX(var(--seam-scale)) rotate(var(--seam-angle)); }
  to { transform: none; }
}
@media (max-width: 63.999rem) {
  :root { --folio-size: 3rem; --seam-size: 4.5rem; }
}
@media (max-width: 47.999rem) {
  :root { --folio-size: 2.75rem; --seam-size: 3.5rem; }
  .chapter-marker { gap: .75rem; }
  .chapter-content { padding-block-start: 1.75rem; }
}
/* Static geometry in children survives cancellation of the moving wrapper. */
html[data-effects="off"] [data-motion-decor] { animation: none !important; transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  [data-motion-decor] { animation: none !important; transition: none !important; transform: none !important; }
}
@media (forced-colors: active) {
  .folio-sigil, .folio-echo, .chapter-seam { color: CanvasText !important; }
  .chapter-seam { background: Canvas; }
  .seam-art::before, .seam-art::after { border: 1px solid CanvasText; background: CanvasText; }
}
@media print {
  [data-motion-decor] { animation: none !important; transition: none !important; transform: none !important; }
  .chapter-seam { display: none !important; }
  .chapter-content { padding-block-start: 1rem; }
  .folio-sigil, .folio-echo { color: black !important; }
  .chapter { break-inside: auto; }
  .chapter-heading, h3 { break-after: avoid; }
  .editorial-detail > :not(summary) { display: block !important; }
  .editorial-detail::details-content { content-visibility: visible; height: auto; }
}
/* Technology is the fourth leaf; downstream folios retain their original motifs. */
:root { --motion-product-ms: 580; }
.folio-sigil[data-folio="D"] :is(.folio-base,.folio-echo)::before { inset: 8px; border-right-color: currentColor; transform: rotate(45deg); }
#technology .chapter-seam { --seam-to: #dfdfd3; --seam-x: -26px; --seam-scale: .84; --seam-angle: -1deg; }
#technology .seam-art::after { width: 34%; left: 56%; height: .8rem; }
#distribution .chapter-seam { --seam-from: #dfdfd3; }
.technology-chapter { background: #dfdfd3; }
.technology-chapter h2 em { font-family: var(--serif); font-weight: 400; }
.technology-intro { font-size: clamp(1.1rem,2vw,1.6rem); margin-block: 1rem 2.5rem; max-width: 40ch; }