/* Draft D home (home-inkling.html): one symbolic, interactive object on white space,
   followed by the structures that explain it. Builds on site/direction/design-system/home-light. */
body.hi{--paper:#f9faf7;--tint:#eef2ec;--ink:#1e2a24;--muted:#5d6b62;--line:#d7dfd6;--lav:#a37cf1;--sage:#86d2ae;--sky:#74b6fc;--butter:#e7c23c;--blush:#f98a9b;--navy:#273c94;--brain-lilac:var(--lav);--brain-sage:var(--sage);--brain-blue:var(--sky);--brain-ochre:var(--butter);--brain-rose:var(--blush);--brain-teal:var(--navy);--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;background:var(--paper);color:var(--ink)}
.hi h1,.hi h2,.hi h3{font-weight:400;letter-spacing:-.04em}
.hi-button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none;transition:background .2s}
.hi-button:hover{background:#42604c;text-decoration:none}
.hi-textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);padding-block:2px}
.hi-textlink:hover{border-color:var(--ink);text-decoration:none}

/* Hero */
.hi-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px 90px;min-height:calc(100svh - 80px);justify-content:center}
.hi-art{width:min(820px,100%);height:clamp(240px,30vw,360px);position:relative}
.hi-art svg{display:block;width:100%;height:100%;overflow:visible}
.hi-art .hi-region{cursor:pointer}
/* Pause and play for the hero motion: a zero-height row as wide as the art, so the button sits on the art's bottom-right
   corner without moving anything. Shown by home-inkling.js; aria-pressed="true" means paused. */
.hi-art-controls{position:relative;width:min(820px,100%);height:0}
.hi-motion{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.hi-motion:hover{color:var(--ink)}
.hi-motion circle{fill:var(--paper);stroke:var(--line)}
.hi-motion path{fill:currentColor}
.hi-motion[aria-pressed="true"] .hi-motion-pause,.hi-motion:not([aria-pressed="true"]) .hi-motion-play{display:none}
.hi-art .hi-region path{transition:opacity .4s}
.hi-art.has-focus .hi-region:not(.is-active) path{opacity:.55}
/* The caption is a box of fixed height: a title row, then --hi-cap-lines reserved lines of text. The text changes with
   every re-solve of the form above, so the box must not change size, or the art above and the heading below would move.
   The longest caption is about 706px wide at 13px, one line in the 760px box; narrower screens reserve more lines. */
.hi-art-caption{--hi-cap-lines:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:center;column-gap:10px;row-gap:4px;margin:6px 0 0;width:min(760px,100%);height:calc((1 + var(--hi-cap-lines)) * 1.5em + 4px);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--muted);text-align:center}
.hi-art-caption strong{font-weight:400;color:var(--ink)}
.hi-art-caption>span:last-child{flex:0 0 100%}
.hi-art-dot{width:8px;height:8px;border-radius:50%;background:var(--hi-color,var(--ink));transition:background .35s}
@media(max-width:767px){.hi-art-caption{--hi-cap-lines:2}}
.hi-hero-copy{margin-top:34px;max-width:960px}
body.hi #main h1{margin-top:12px;font-size:clamp(40px,4.6vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:400}
.hi-sub{margin:20px auto 0;max-width:880px;font-size:19px;line-height:1.5;color:var(--muted);text-wrap:balance}
.hi-actions{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:28px}
.hi-frame-bar{fill:var(--tint);stroke:var(--hairline);stroke-width:1}
.hi .site-footer{border-top:1px solid var(--line)}
@media(max-width:640px){.hi-hero{min-height:0;padding:24px 16px 64px}.hi h1{font-size:clamp(30px,8vw,38px)}.hi h1 br{display:none}.hi-sub{font-size:17px;text-wrap:pretty}.hi-art{height:230px}.hi-art-caption{--hi-cap-lines:3;font-size:12px;column-gap:6px}.hi-actions{flex-direction:column;gap:14px}}
@media(max-width:360px){.hi-art-caption{--hi-cap-lines:4}}
@media(prefers-reduced-motion:reduce){.hi-art .hi-region path,.hi-art-dot{transition:none}}
.hi-proof{margin:36px 0 0;background:#171b19;border:1px solid #1e2a2422;border-radius:10px;overflow:hidden;color:#c3cbbf;box-shadow:0 18px 40px #1e2a2412}
.hi-proof .hi-media video{aspect-ratio:16/9}
.hi-proof figcaption{display:block;padding:12px 16px 13px;font-size:12.5px;line-height:1.5;color:#aab3a9;border-top:1px solid #c9d4c11f}
.hi-steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hi-steps li{border-top:1px solid #1e2a2455;padding-top:14px;min-width:0}
.hi-steps span{display:block;font:400 11px/1.6 var(--mono);color:var(--muted);letter-spacing:.06em}
.hi-steps strong{display:block;font-weight:400;font-size:17px;margin-top:6px}
.hi-steps p{margin-top:6px;font-size:14px;line-height:1.6;color:#4b5951}
@media(max-width:1000px){.hi-steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hi-steps{grid-template-columns:1fr}}
/* Framed media (demo video) */
.hi-frame-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;font:11px/1.4 var(--mono);letter-spacing:.06em;color:#9aa49b;border-bottom:1px solid #c9d4c11f}
.hi-frame-bar>span:first-child{display:flex;gap:5px}
.hi-frame-bar i{width:7px;height:7px;border-radius:50%;background:#c9d4c155}
.hi-media{position:relative;background:#0e100f}
.hi-media video{display:block;width:100%;height:auto}
.hi-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;border:1px solid #f2f1eb66;border-radius:999px;background:#111513cc;color:#f2f1eb;font-size:13px;font-family:inherit;backdrop-filter:blur(6px);cursor:pointer;transition:background .2s,border-color .2s}
.hi-play>span:first-child{font-size:11px}
.hi-play:hover{background:#111513;border-color:#f2f1eb}
.is-playing .hi-play{display:none}

/* Problem layer in the hero: points that the pieces gather around, then a plan that connects them. */
.hi-problem circle{fill:var(--ink)}
.hi-scene-box{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7}
.hi-scene-pallet{fill:#e9ede8;stroke:var(--ink);stroke-width:1.1;opacity:.8}
.hi-scene-substrate{fill:#eef1ec;stroke:var(--ink);stroke-width:1.1;opacity:.75}
.hi-scene-pad{fill:var(--ink);opacity:.55}
.hi-scene-trace{fill:none;stroke:var(--ink);stroke-width:1;opacity:.6}
.hi-scene-axis{fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.6}
.hi-scene-now{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 5;opacity:.45}

/* The missing decision layer: selectable stack (inline SVG generated offline) + explanation panel */
.hi-stack3{margin-top:40px}
.hi-term{font-weight:500;color:var(--lavender-ink)}
#vision .equal-intro{align-items:start}
#vision .equal-intro .proposal-link{margin-top:12px}
.hi-stack-grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(240px,1fr);gap:var(--layout-gap);align-items:start;margin-top:0}
.hi-stackfig{margin:0}
.hi-stackfig .hi-stackfig-m{display:none}
.hi-stackfig svg{width:100%;height:auto;display:block;overflow:visible}
.hi-stackfig figcaption{margin-top:16px;font-size:var(--type-caption);line-height:1.6;color:var(--muted);max-width:66ch}
.hi-sl{cursor:pointer;outline:none;transition:filter .35s}
.hi-sl > *{transition:opacity .35s}
.hi-sl .hi-sl-slab{transition:opacity .35s,stroke-width .25s,stroke .25s}
/* Unselected layers recede, but their title and subtitle stay at full strength: they are the buttons' labels and must keep 4.5:1. */
.hi-stack3.has-pick .hi-sl:not(.is-active) > :not(.hi-sl-title,.hi-sl-sub){opacity:.48}
.hi-stack3.has-pick .hi-sl:not(.is-active):hover > :not(.hi-sl-title,.hi-sl-sub){opacity:.8}
/* The selected layer does not grow: the connectors and the loop arrows end exactly on the edges of the boxes. */
.hi-sl.is-active{filter:drop-shadow(0 8px 16px rgba(30,42,36,.13))}
/* The selected layer: accent outline and a heavier title. Each layer keeps its own fill, so the Decision layer stays the only lavender one. */
.hi-sl.is-active .hi-sl-slab{stroke:#6f5aa3;stroke-width:2.6}
.hi-sl.is-active .hi-sl-title{font-weight:600!important}
/* Keyboard focus looks different from selection, also on the selected layer. */
.hi-sl:focus-visible .hi-sl-slab{stroke:var(--ink);stroke-width:2.6;stroke-dasharray:3 3}
/* Shown once by home-stack.js: after the signal has climbed the stack, the dashes of the loop run towards the data layers. */
.hi-stack3.is-returning .hi-sl-track path{animation:hi-loop-run .65s linear}
@keyframes hi-loop-run{to{stroke-dashoffset:-24}}
.hi-stack-panel{position:sticky;top:96px;padding-top:4px;max-width:360px}
.hi-stack-nav{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hi-stack-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.hi-stack-btn:hover{background:var(--tint);border-color:#b7c0b8}
.hi-stack-count{font:400 var(--type-label)/1 var(--font-sans);color:var(--muted)}
.hi-stack-card{display:none}
.hi-stack-card.is-active{display:block}
.hi-stack-card.is-entering{animation:hi-stack-in .32s ease-out}
@keyframes hi-stack-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hi-stack-card h3{margin:0;font-size:var(--type-subheading);line-height:1.25;letter-spacing:-.025em;font-weight:400}
.hi-stack-card[data-layer="decision"] h3{color:#6f5aa3}
.hi-stack-text{margin:12px 0 0;font-size:var(--type-compact);line-height:var(--leading-body);color:var(--muted)}
.hi-stack-note{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--tint);font-size:var(--type-caption);line-height:1.6;color:var(--ink)}
.hi-stack-card[data-layer="decision"] .hi-stack-note{background:#ece6f6}
@media(max-width:980px){.hi-stack-grid{grid-template-columns:1fr;gap:28px}.hi-stack-panel{position:static}.hi-stackfig{max-width:none}}
@media(max-width:700px){.hi-stackfig .hi-stackfig-d{display:none}.hi-stackfig .hi-stackfig-m{display:block;max-width:420px}}
@media(prefers-reduced-motion:reduce){.hi-sl,.hi-sl > *,.hi-sl .hi-sl-slab{transition:none}.hi-stack-card.is-entering{animation:none}}

/* Blocks rise in once as they enter the view. The class is added by home-reveal.js, so the page is complete
   without scripts. Nothing below the hero repeats on its own. */
.hi-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hi-rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hi-rv{opacity:1;transform:none;transition:none}}
@media print{.hi-rv{opacity:1;transform:none}}