:root {
  --know-navy: #17242c;
  --know-cream: #f3eee3;
  --know-brass: #735735;
  --know-sage: #6e7f6b;
  --know-serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Times New Roman", serif;
  --know-sans: "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; max-width: 100%; scroll-padding-top: 6rem; }
body { margin: 0; max-width: 100%; overflow-x: clip; background: var(--know-cream); color: var(--know-navy); font: 1.0625rem/1.7 var(--know-sans); }
[hidden] { display: none !important; }
.know-skip { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 40; transform: translateY(-220%); }
.know-skip:focus { transform: none; }
.know-header {
  position: sticky; top: 0; z-index: 20; min-height: 76px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
  padding: 0.45rem 1rem; background: var(--know-cream);
  border-bottom: 1px solid var(--know-brass);
}
.know-brand { margin: 0; font: 600 1.05rem/1.2 var(--know-serif); }
.know-brand-note { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--know-brass);
  font-size: 0.86rem; line-height: 1.5; color: var(--know-brass); max-width: 32rem; }
.know-beat-nav { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.know-beat-nav a, .know-copy button, .know-cta-actions button, .know-cta-actions a, .know-motion button {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem 0.8rem; color: var(--know-navy); text-decoration: none;
}
:focus-visible { outline: 3px solid var(--know-navy); outline-offset: 2px; }
.know-story { max-width: 1200px; margin: 0 auto; padding: 0 1rem 3rem; }

/* ============================================================
   Persistent dossier stage: ONE coordinate frame, sticky.
   Every actor is a named rectangle of ONE alpha atlas and rests
   on ONE named desk line, so the contact survives every pose.
   ============================================================ */
.know-stage-rail { display: contents; }
.know-stage { position: sticky; top: var(--know-header-offset, 76px); z-index: 5; margin: 0 auto; max-width: 900px; }
.know-canvas {
  position: relative; width: 100%; height: clamp(260px, 62vw, 400px);
  overflow: hidden; background: #2a3438;

  /* the one shared resting plane every actor registers against */
  --know-desk-line: 76%;

  /* timeline phases, written by know-story.js; CSS resolves the poses */
  --ph-open: 0; --ph-spread: 0; --ph-gather: 0; --ph-choose: 0;
  --ph-insert: 0; --ph-travel: 0; --ph-settle: 0; --ph-close: 0;
  --ph-note: 0; --ph-noteback: 0;
  --has-goal: 0;
}
body[data-goal] .know-canvas { --has-goal: 1; }

.know-desk {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}

.know-actor {
  position: absolute;
  left: var(--x); top: var(--know-desk-line);
  width: var(--w); aspect-ratio: var(--ar);
  margin-left: calc(var(--w) / -2);
  background-repeat: no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-pos);
  opacity: var(--pose-op, 1);
  z-index: var(--z);
  transform-origin: 50% calc(100% - var(--contact));
  transform:
    translate(var(--pose-x, 0%), calc(-100% + var(--contact) + var(--pose-y, 0%)))
    rotate(var(--pose-rot, 0deg));
  will-change: transform, opacity;
}

/* The externalised rasters carry the identical bytes that used to be base64
   inlined in this file. They are requested only once know-story.js has marked
   the document as the dynamic path, so Save-Data, no-JS and the static path
   never pay for them. */
body.know-js .know-desk { background-image: url("assets/know-desk-7cf4f3fa.webp"); }
body.know-js .know-actor { background-image: url("assets/know-actors-atlas-4f204e86.webp"); }

/* --- atlas rectangles. atlas 1536x1024, sha256
   4f204e86cf66939d8f9ac83a5a938a1a7aa8c82426ff9ece72089547ae7ea117
   sheet-A  open notebook  x57   y89   w531 h383  solid bottom 449
   sheet-B  sealed letter  x80   y586  w469 h323  solid bottom 893
   folder   pocket folder  x661  y508  w359 h463  solid bottom 956
   clip     binder clip    x1181 y579  w282 h339  solid bottom 894
   pen      fountain pen   x1106 y71   w352 h412  solid bottom 473
   --contact is the transparent margin under the object, as % of the crop height --- */
.know-actor-sheet[data-actor="clarity"] {
  --ar: 531 / 383; --bg-size: 289.266% 267.363%; --bg-pos: 5.672% 13.885%;
  --contact: 6.005%; --w: 33%; --x: 32%; --z: 4;
  --tuck-x: 48%; --tuck-y: 4%; --tuck-rot: -3deg;
  --gather-x: 6%; --aside-x: -22%; --mouth-x: 74.5%; --mouth-y: -45%;
}
.know-actor-sheet[data-actor="preparation"] {
  --ar: 469 / 323; --bg-size: 327.505% 317.028%; --bg-pos: 7.498% 83.595%;
  --contact: 4.954%; --w: 31%; --x: 68%; --z: 4;
  --tuck-x: -55%; --tuck-y: 4%; --tuck-rot: 3deg;
  --gather-x: -7%; --aside-x: 22%; --mouth-x: -23.6%; --mouth-y: -51%;
}
.know-actor-folder {
  --ar: 359 / 463; --bg-size: 427.855% 221.166%; --bg-pos: 56.160% 90.553%;
  --contact: 3.240%; --w: 24%; --x: 50%; --z: 3;
  --open-rot: -2.4deg;
}
.know-actor-clip {
  --ar: 282 / 339; --bg-size: 544.681% 302.065%; --bg-pos: 94.179% 84.526%;
  --contact: 7.080%; --w: 10%; --x: 62%; --z: 5;
  --travel-x: -78%; --travel-rot: -9deg; --settle-x: -8%;
}
.know-actor-pen {
  --ar: 352 / 412; --bg-size: 436.364% 248.544%; --bg-pos: 93.412% 11.601%;
  --contact: 2.427%; --w: 11%; --x: 83%; --z: 1;
  --note-x: -34%; --note-rot: 9deg;
}

/* --- poses: pure functions of the phase variables, so forward and reverse
       scrolling resolve to the same numbers and no state accumulates --- */
.know-actor-sheet {
  --pose-x: calc(
      var(--tuck-x) * (1 - var(--ph-spread))
    + var(--gather-x) * var(--ph-gather)
    + var(--aside-x) * var(--ph-insert) * var(--has-goal) * var(--is-unsel, 1)
    + var(--mouth-x) * var(--ph-insert) * var(--is-sel, 0));
  --pose-y: calc(
      var(--tuck-y) * (1 - var(--ph-spread))
    - 4% * var(--ph-choose) * var(--is-sel, 0)
    + var(--mouth-y) * var(--ph-insert) * var(--is-sel, 0));
  --pose-rot: calc(var(--tuck-rot) * (1 - var(--ph-spread)));
  --pose-op: min(1, var(--ph-spread) * 1.8);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0.5rem 0.4rem;
}
body[data-goal="clarity"] .know-actor-sheet[data-actor="clarity"],
body[data-goal="preparation"] .know-actor-sheet[data-actor="preparation"] { --is-sel: 1; --is-unsel: 0; }
body[data-goal] .know-actor-sheet { --dim: 0.45; }
.know-actor-sheet { opacity: calc(var(--pose-op, 1) - var(--dim, 0) * var(--ph-insert) * var(--is-unsel, 1)); }

.know-actor-folder {
  --pose-rot: calc(var(--open-rot) * var(--ph-open) * (1 - var(--ph-close)));
}
.know-actor-clip {
  --pose-x: calc(var(--travel-x) * var(--ph-travel) + var(--settle-x) * var(--ph-settle));
  --pose-rot: calc(var(--travel-rot) * var(--ph-travel) * (1 - var(--ph-settle)));
}
.know-actor-pen {
  --pose-x: calc(var(--note-x) * (var(--ph-note) - var(--ph-noteback)));
  --pose-rot: calc(var(--note-rot) * (var(--ph-note) - var(--ph-noteback)));
}

/* the chosen sheet sinks BEHIND the folder panel: real occlusion, named state */
body[data-goal="clarity"] .know-stage[data-scene^="insert"] .know-actor-sheet[data-actor="clarity"],
body[data-goal="clarity"] .know-stage[data-scene^="resolve"] .know-actor-sheet[data-actor="clarity"],
body[data-goal="preparation"] .know-stage[data-scene^="insert"] .know-actor-sheet[data-actor="preparation"],
body[data-goal="preparation"] .know-stage[data-scene^="resolve"] .know-actor-sheet[data-actor="preparation"] { z-index: 2; }

.know-actor-title {
  margin: 0; padding: 0.15rem 0.45rem; font: 700 0.85rem/1.4 var(--know-serif);
  color: var(--know-cream); background: var(--know-sage); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-goal="clarity"] .know-actor-sheet[data-actor="clarity"] .know-actor-title,
body[data-goal="preparation"] .know-actor-sheet[data-actor="preparation"] .know-actor-title {
  background: var(--know-brass);
}
.know-stage-cap { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--know-brass); }

/* Ordinary flow: copy never overlaps the actor canvas. */
.know-beat { max-width: 42rem; margin: 0 auto; padding: 2rem 0; }
.know-beat,
.know-services,
.know-boundaries,
.know-faq,
.know-cta,
.know-copy h1,
.know-copy h2,
.know-services h2,
.know-boundaries h2,
.know-faq h2,
.know-cta h2,
.know-cta h3 {
  scroll-margin-top: 6rem;
}
.know-copy { max-width: 42rem; }
.know-copy button[aria-pressed="true"] {
  font-weight: 700;
  border-color: var(--know-navy);
  box-shadow: inset 0 0 0 3px var(--know-navy);
}
.know-eyebrow { margin: 0 0 0.35rem; color: var(--know-brass); letter-spacing: 0.12em; font-size: 0.78rem; }
.know-copy h1 { margin: 0 0 0.75rem; font: 650 3rem/1.15 var(--know-serif); }
.know-copy h2 { font: 650 1.6rem/1.25 var(--know-serif); }
.know-copy button, .know-cta-actions button {
  margin: 0.25rem 0.35rem 0.25rem 0; border: 1px solid var(--know-brass);
  background: var(--know-cream); cursor: pointer; font: inherit;
}
.know-services, .know-boundaries, .know-faq, .know-cta, .know-footer { max-width: 42rem; margin: 2.4rem auto; }
.know-faq details { margin: 0.55rem 0; }
.know-faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.know-result { margin: 1.2rem 0; padding: 1rem 1.05rem; border-left: 3px solid var(--know-sage); background: #f7f3ea; }
body[data-goal="clarity"] .know-result[data-result="preparation"],
body[data-goal="preparation"] .know-result[data-result="clarity"] { display: none; }
.know-selection-note { color: var(--know-navy); font-weight: 600; }

/* one quotable answer per required question, readable with and without JS */
.know-qa { margin: 1.1rem 0; }
.know-q { margin: 0 0 0.2rem; font-weight: 700; }
.know-a { margin: 0; }
.know-nonlegal { color: var(--know-brass); font-weight: 600; }

/* No-JS, Save-Data, missing-asset and static paths: hide the bitmap stage.
   The flow keeps every answer, every checklist and every conversion. */
body:not(.know-js) .know-canvas,
body[data-motion-mode="static"] .know-canvas,
body[data-know-assets="missing"] .know-canvas,
body[data-know-assets="skipped"] .know-canvas { display: none; }
body[data-motion-mode="static"] .know-stage,
body[data-know-assets="missing"] .know-stage,
body[data-know-assets="skipped"] .know-stage { position: static; }
body:not(.know-js) .know-stage-cap,
body[data-motion-mode="static"] .know-stage-cap,
body[data-know-assets="missing"] .know-stage-cap,
body[data-know-assets="skipped"] .know-stage-cap { display: none; }

/* ---- reduced motion and the explicit end state: resolve once, never on scroll ---- */
body[data-motion-mode="endstate"] .know-canvas {
  --ph-open: 1; --ph-spread: 1; --ph-gather: 1; --ph-choose: 1;
  --ph-insert: 1; --ph-travel: 1; --ph-settle: 1; --ph-close: 1;
  --ph-note: 1; --ph-noteback: 1;
}
body[data-motion-mode="endstate"] .know-actor { will-change: auto; transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .know-canvas {
    --ph-open: 1; --ph-spread: 1; --ph-gather: 1; --ph-choose: 1;
    --ph-insert: 1; --ph-travel: 1; --ph-settle: 1; --ph-close: 1;
    --ph-note: 1; --ph-noteback: 1;
  }
  .know-actor { will-change: auto; transition: none; animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 47.99rem) {
  .know-copy h1 { font-size: 2rem; }
  /* Mobile is a recomposition, not a scaled-down desktop: the pen leaves the
     stage, only the chosen document stays, and the remaining actors are
     re-anchored on the same desk line. */
  .know-actor-pen { display: none; }
  .know-actor-sheet[data-actor="preparation"] { display: none; }
  body[data-goal="preparation"] .know-actor-sheet[data-actor="preparation"] { display: flex; }
  body[data-goal="preparation"] .know-actor-sheet[data-actor="clarity"] { display: none; }
  .know-actor-sheet[data-actor="clarity"] { --w: 45%; --x: 31%; --tuck-x: 39%; --mouth-x: 62%; --mouth-y: -49.4%; --aside-x: -14%; }
  .know-actor-sheet[data-actor="preparation"] { --w: 43%; --x: 31%; --tuck-x: 42%; --mouth-x: 71.6%; --mouth-y: -50.5%; --aside-x: -14%; }
  .know-actor-folder { --w: 33%; --x: 47%; }
  .know-actor-clip { --w: 16%; --x: 72%; --travel-x: -102%; }
  .know-actor-title { font-size: 0.78rem; }
  /* Copy scrolls beneath the pinned dossier. Give its caption an opaque
     release edge so a paragraph cannot paint through the physical stage. */
  .know-stage { background: var(--know-cream); }
  .know-stage-cap { position: relative; background: var(--know-cream); }
  .know-stage::after {
    content: "";
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 0;
    right: 0;
    height: 3rem;
    z-index: 6;
    pointer-events: none;
    background: var(--know-cream);
  }
}
/* Desktop: the dossier and the four readable beats occupy separate rails.
   The single bitmap stage stays pinned while the copy never crosses it. */
@media (min-width: 48rem) {
  .know-journey {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  .know-stage-rail {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: stretch;
    min-height: 0;
  }
  .know-stage {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .know-beat {
    grid-column: 2;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .know-services, .know-boundaries, .know-faq, .know-cta {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 56rem;
  }
}
/* At high zoom or a very short/narrow viewport the pinned header and canvas
   leave no reading area. Keep the same actors and native scroll timeline, but
   let the stage flow away so every beat can occupy the viewport in sequence. */
body[data-know-reflow="compact"] .know-header {
  position: relative;
  top: auto;
  min-height: 0;
}
body[data-know-reflow="compact"] .know-stage {
  position: relative;
  top: auto;
  z-index: auto;
}
body[data-know-reflow="compact"] .know-canvas {
  height: clamp(130px, 38vw, 160px);
}
body[data-know-reflow="compact"] .know-stage::after { content: none; }
body[data-know-reflow="compact"] .know-actor-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.1rem 0.2rem;
}
@media print {
  .know-header, .know-stage, .know-skip, .know-motion, .know-cta-actions, button { display: none !important; }
  body { background: #fff; color: #000; }
  .know-result { break-inside: avoid; border-left: 2px solid #666; background: #fff; }
  .know-qa, .know-beat { break-inside: avoid; }
  /* the checklist is the printed deliverable: never let an answer stay folded */
  details > summary ~ * { display: revert; }
  details::details-content { display: block; content-visibility: visible; }
  summary { font-weight: 700; }
  a[href^="#"] { text-decoration: none; color: inherit; }
}
.know-journey{position:relative}
#know-cta-title{scroll-margin-top:calc(var(--know-header-offset,76px) + 12px)}
/* brand-2026 */
.know-brand{display:inline-flex;align-items:center;gap:.5rem}.know-brand-mark{width:28px;height:28px;flex:none}