/* Kito factory line (D4) — scroll-driven section.
   Everything is scoped under .k-d4 and every class is prefixed kd4- so it cannot
   collide with site.css, how-assets.css or concept.css. Tokens are KDS values. */

@font-face { font-family: "KD4 Diatype"; src: url("/assets/fonts/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "KD4 Diatype"; src: url("/assets/fonts/ABCDiatype-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "KD4 Diatype Mono"; src: url("/assets/site/d4/fonts/ABCDiatypeMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.k-d4 {
  --kd4-bg: #F7F7F4; --kd4-sunken: #F2F1ED; --kd4-ink: #26251E; --kd4-ink-2: #3D3A31;
  --kd4-quiet: #77766F; --kd4-faint: #A09F9B; --kd4-line: #DEDBD3; --kd4-line-strong: #CCCBC6;
  --kd4-accent: #BB3D13; --kd4-ok: #35765C;
  --kd4-ease: cubic-bezier(.22, 1, .36, 1);
  --kd4-sans: var(--font-body, "Helvetica Neue", "Nimbus Sans", Arial, sans-serif);
  --kd4-mono: "KD4 Diatype Mono", ui-monospace, Menlo, monospace;
  /* the pinned stage sits under the fixed glass header */
  --kd4-top: var(--pinned-header-height, 74px);
  position: relative;
  max-width: calc(var(--site-width, 1520px) + var(--site-gutter, 48px) * 2);
  margin-inline: auto;
  padding-inline: var(--site-gutter, clamp(16px, 3vw, 48px));
  background: var(--kd4-bg);
  color: var(--kd4-ink);
  font-family: var(--kd4-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.k-d4 *, .k-d4 *::before, .k-d4 *::after { box-sizing: border-box; }
.k-d4 h2, .k-d4 h3, .k-d4 p, .k-d4 figure, .k-d4 ul { margin: 0; }
.k-d4 button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
.k-d4 button:focus-visible, .k-d4 [role=button]:focus-visible { outline: 2px solid var(--kd4-ink); outline-offset: 4px; }
.k-d4 .kd4-k { font-family: var(--kd4-mono); font-size: 11px; line-height: 1.4; color: var(--kd4-quiet); text-transform: uppercase; letter-spacing: .02em; }
.k-d4 .kd4-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* intro */
.k-d4 .kd4-intro { padding: 7vh 0 5vh; }
.k-d4 .kd4-intro h2 { font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -.04em; margin: 14px 0 0; text-wrap: balance; }
.k-d4 .kd4-close .kd4-lead { font-size: 16px; line-height: 1.5; color: var(--kd4-quiet); max-width: 520px; margin: -8px 0 24px; }
.k-d4 .kd4-intro .kd4-lead { font-size: 16px; line-height: 1.5; color: var(--kd4-quiet); }

/* scroll sequence: chapters left, pinned factory right */
.k-d4 .kd4-seq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); transition: grid-template-columns .6s var(--kd4-ease); }
.k-d4 .kd4-seq.kd4-at-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.k-d4 .kd4-chapters { min-width: 0; padding-bottom: 0; }
.k-d4 .kd4-ch { min-height: 32vh; padding-block: 14px; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .45s var(--kd4-ease); }
.k-d4 .kd4-ch:not(.kd4-plain) > p:not([class]) { max-width: 30rem; }
.k-d4 .kd4-ch.kd4-on { opacity: 1; }
.k-d4 .kd4-num { display: flex; align-items: center; gap: 10px; }
.k-d4 .kd4-num::before { content: ""; width: 7px; height: 7px; background: var(--kd4-accent); flex: none; }
.k-d4 .kd4-plain .kd4-num::before { background: var(--kd4-faint); }
.k-d4 .kd4-ch h3 { font-weight: 400; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin: 11px 0 10px; text-wrap: balance; }
.k-d4 .kd4-ch > p:not([class]) { font-size: clamp(16px, 1.1vw, 18px); line-height: 1.5; color: var(--kd4-quiet); }
.k-d4 .kd4-ch .kd4-say { margin-top: 28px; max-width: 32rem; font-size: 18px; line-height: 1.5; color: var(--kd4-quiet); }
.k-d4 .kd4-say .kd4-dim { color: var(--kd4-quiet); font-family: var(--kd4-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.k-d4 .kd4-say s, .k-d4 .kd4-quote s { color: var(--kd4-quiet); text-decoration-color: var(--kd4-accent); }
.k-d4 .kd4-src { font-family: var(--kd4-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--kd4-ok); }

.k-d4 .kd4-stage-col { position: relative; }
.k-d4 .kd4-pin { position: sticky; top: var(--kd4-top); height: calc(100vh - var(--kd4-top)); display: flex; flex-direction: column; justify-content: center; }
.k-d4 .kd4-stage { position: relative; background: var(--kd4-sunken); border-radius: 10px; padding: 0 0 4px; will-change: transform; }
.k-d4 .kd4-scene { display: block; width: 100%; height: auto; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.k-d4 .kd4-index { display: flex; gap: 4px 18px; flex-wrap: wrap; padding: 14px 20px 0; position: relative; z-index: 1; }
.k-d4 .kd4-index button { font-family: var(--kd4-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--kd4-quiet); padding: 8px 0; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.k-d4 .kd4-index button:hover { color: var(--kd4-ink); }
.k-d4 .kd4-index button[aria-current=true] { color: var(--kd4-ink); border-color: var(--kd4-accent); }
.k-d4 .kd4-index button:last-child,
.k-d4 .kd4-index button:last-child:hover,
.k-d4 .kd4-index button:last-child[aria-current=true] {
  color: var(--kd4-accent);
  border-color: currentColor;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.k-d4 .kd4-progress { height: 1px; background: var(--kd4-line); margin: 0 20px; }
.k-d4 .kd4-progress i { display: block; height: 1px; background: var(--kd4-ink); transform-origin: 0 0; transform: scaleX(0); }
.k-d4 .kd4-stage:not(.kd4-live) .kd4-machine, .k-d4 .kd4-stage:not(.kd4-live) .kd4-hit { pointer-events: none; }

/* Final-state factory used inside the Product hero. It animates in place and has no scroll chapters. */
.k-d4--hero { max-width: none; width: 100%; padding: 0; background: transparent; }
.k-d4--hero .kd4-seq, .k-d4--hero .kd4-seq.kd4-at-start { display: block; }
.k-d4--hero .kd4-stage-col { position: static; }
.k-d4--hero .kd4-pin { position: static; height: auto; }
.k-d4--hero .kd4-stage { box-shadow: 0 24px 60px -44px rgba(38,37,30,.45); }
.k-d4--hero .kd4-scene { width: 100%; height: auto; }
.k-d4--hero .kd4-stage-status { min-height: 48px; padding-bottom: 14px; }
.k-d4--hero .kd4-machine, .k-d4--hero .kd4-hit { pointer-events: none !important; cursor: default; }

/* The questions are the final chapter: one clear answer at a time. */
.k-d4 .kd4-plain { min-height: 0; padding-block: 8vh 24px; opacity: 1; scroll-margin-top: 96px; }
.k-d4 .kd4-plain > h2 { margin: 0 0 30px; font-size: clamp(36px, 3.8vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; }
.k-d4 .kd4-choice { border-top: 1px solid var(--kd4-line); }
.k-d4 .kd4-choice:last-child { border-bottom: 1px solid var(--kd4-line); }
.k-d4 .kd4-choice h3 { margin: 0; font-size: clamp(28px, 2.1vw, 34px); line-height: 1.2; letter-spacing: -.025em; text-wrap: initial; }
.k-d4 .kd4-choice button { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; text-align: left; color: var(--kd4-ink); }
.k-d4 .kd4-choice button:hover, .k-d4 .kd4-choice button[aria-expanded=true] { color: var(--kd4-accent); }
.k-d4 .kd4-choice-mark { position: relative; width: 16px; height: 16px; flex: none; }
.k-d4 .kd4-choice-mark::before, .k-d4 .kd4-choice-mark::after { content: ''; position: absolute; top: 7px; left: 0; width: 16px; height: 1px; background: currentColor; }
.k-d4 .kd4-choice-mark::after { transform: rotate(90deg); transition: transform .25s var(--kd4-ease); }
.k-d4 [aria-expanded=true] .kd4-choice-mark::after { transform: rotate(0); }
.k-d4 .kd4-answer { padding: 0 32px 24px 0; font-size: 20px; line-height: 1.45; color: var(--kd4-ink); }
.k-d4 .kd4-answer[hidden] { display: none; }
.k-d4 .kd4-cap-chips { margin-top: 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.k-d4 .kd4-cap-chips li { padding: 5px 10px; border: 1px solid var(--kd4-line-strong); border-radius: 3px; font-size: 12px; line-height: 1.3; color: var(--kd4-ink); }
.k-d4 .kd4-stage-status { margin: 0; padding: 0 20px 20px; font-size: 14px; line-height: 1.5; color: var(--kd4-quiet); min-height: 62px; }
.k-d4 .kd4-stage:not(.kd4-live) .kd4-stage-status { visibility: hidden; }

.k-d4 .kd4-close { padding: 16vh 0 18vh; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--kd4-line); }
.k-d4 .kd4-close h3 { font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 24px; }
.k-d4 .kd4-cta { display: inline-block; background: var(--kd4-ink); color: var(--kd4-bg); font-size: 14px; line-height: 1.2; padding: 12px 20px; border-radius: 999px; text-decoration: none; }
.k-d4 button.kd4-cta { align-self: flex-start; margin-top: 24px; background: var(--kd4-ink); color: var(--kd4-bg); padding: 14px 24px; border-radius: 999px; }

/* svg */
.k-d4 .kd4-face { stroke: #A09F9B; stroke-width: .7; stroke-linejoin: round; }
.k-d4 .kd4-t { fill: #FFFFFF; } .k-d4 .kd4-l { fill: #EBEAE4; } .k-d4 .kd4-r { fill: #D8D6CD; }
.k-d4 .kd4-ghost { opacity: .5; } .k-d4 .kd4-ghost .kd4-face { stroke-dasharray: 3 3; }
.k-d4 .kd4-lead { stroke: var(--kd4-ink); stroke-width: .7; fill: none; opacity: .55; }
.k-d4 .kd4-dock { fill: none; stroke: #A09F9B; stroke-width: .9; stroke-dasharray: 3 3; transition: stroke .2s; }
.k-d4 .kd4-dock.kd4-hover { stroke: var(--kd4-ink); }
.k-d4 .kd4-hit { fill: transparent; cursor: pointer; }
.k-d4 .kd4-machine { cursor: grab; outline: none; }
.k-d4 .kd4-machine.kd4-dragging { cursor: grabbing; }
.k-d4 .kd4-machine .kd4-screen { fill: var(--kd4-ink-2); }
.k-d4 .kd4-machine .kd4-lamp { stroke: #77766F; stroke-width: 2.2; transition: stroke .2s; }
.k-d4 .kd4-live .kd4-machine[aria-pressed=true] .kd4-screen { fill: var(--kd4-accent); }
.k-d4 .kd4-live .kd4-machine[aria-pressed=false] { opacity: .42; }
.k-d4 .kd4-live .kd4-inactive-arm { opacity: .35; }
.k-d4 .kd4-machine.kd4-working .kd4-lamp { stroke: var(--kd4-accent); }
.k-d4 .kd4-machine:hover .kd4-t, .k-d4 .kd4-machine:focus-visible .kd4-t, .k-d4 .kd4-machine.kd4-dragging .kd4-t { fill: #FFFDF8; }
.k-d4 .kd4-machine:focus-visible .kd4-face { stroke: var(--kd4-ink); stroke-width: 1.2; }
.k-d4 .kd4-arms { pointer-events: none; }
.k-d4 .kd4-stripe { stroke: #CCCBC6; stroke-width: 1; }
.k-d4 .kd4-lbl { font-size: 14.5px; fill: var(--kd4-ink); }
.k-d4 .kd4-lbl-small { font-size: 12.5px; fill: var(--kd4-quiet); }
.k-d4 .kd4-lbl-idx { font-family: var(--kd4-mono); font-size: 11.5px; fill: var(--kd4-quiet); }
.k-d4 .kd4-lbl-name { font-size: 14.5px; fill: var(--kd4-ink); font-weight: 500; }
.k-d4 .kd4-lbl-shelf { font-size: 13px; fill: var(--kd4-quiet); }
.k-d4 .kd4-lbl-mono { font-family: var(--kd4-mono); letter-spacing: .06em; }
.k-d4 .kd4-g-labels text { paint-order: stroke; stroke: var(--kd4-sunken); stroke-width: 4px; stroke-linejoin: round; }
.k-d4 .kd4-labels { transition: opacity .2s; }
.k-d4 .kd4-labels.kd4-fading { opacity: 0; }
.k-d4 .kd4-ring { fill: none; stroke: var(--kd4-accent); stroke-width: 1.4; }
.k-d4 .kd4-tip { font-size: 12px; fill: var(--kd4-ink); }
.k-d4 .kd4-tip-bg { fill: #fff; stroke: var(--kd4-line-strong); stroke-width: .8; }
.k-d4 .kd4-part-new { animation: kd4-settle .45s var(--kd4-ease); }
@keyframes kd4-settle { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 700px) {
  .k-d4 #start-anywhere { scroll-margin-top: calc(var(--kd4-top) + clamp(170px, 28vh, 290px) + 36px); }
  .k-d4 .kd4-intro { padding: 7vh 0 4vh; }
  .k-d4 .kd4-seq, .k-d4 .kd4-seq.kd4-at-start, .k-d4 .kd4-close { grid-template-columns: 1fr; gap: 0; }
  .k-d4 .kd4-stage-col { grid-row: 1; position: sticky; top: var(--kd4-top); z-index: 3; background: var(--kd4-bg); padding: 8px 0; }
  .k-d4 .kd4-pin { position: static; height: auto; }
  .k-d4 .kd4-index { display: flex; justify-content: flex-end; padding: 6px 14px 0; }
  .k-d4 .kd4-index button:not(:last-child) { display: none; }
  .k-d4 .kd4-ch { min-height: 32vh; }
  .k-d4 .kd4-plain { min-height: 0; padding-top: 5vh; }
  .k-d4 .kd4-scene { height: clamp(170px, 28vh, 290px); }
  .k-d4 .kd4-stage-status { min-height: 0; padding: 0 14px 10px; font-size: 12px; }
  .k-d4 .kd4-stage:not(.kd4-live) .kd4-stage-status { display: none; }
  .k-d4 .kd4-choice h3 { font-size: 28px; }
  .k-d4 .kd4-choice button { padding-block: 18px; }
  .k-d4 .kd4-answer { font-size: 18px; padding-bottom: 20px; }
  .k-d4--hero .kd4-stage-col { position: static; top: auto; padding: 0; background: transparent; }
  .k-d4--hero .kd4-scene { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .k-d4 *, .k-d4 *::before, .k-d4 *::after { animation: none !important; transition: none !important; }
}
body.is-motion-paused .k-d4 *, body.is-motion-paused .k-d4 *::before, body.is-motion-paused .k-d4 *::after { animation: none !important; transition: none !important; }