/* Tacit landing v13 — what the v13 handoff added to the v11 page (README-v13.md).

   1. The Stack Explorer, in "01 · How it works". The rules are stack-explorer.html's, with every
      class scoped to sx- (README-v13 §2.7.2) and nothing else changed; the panel title is the
      page's h2 because the hero already holds its h1. The two rules marked "page fit" are the
      page's own: the explorer sits inside .wrap at the height §2.7.1 gives it, where the reference
      filled its window, and it inherits the reference's body font values rather than the site's.
   2. The name section, "Why we're called Tacit", verbatim (README-v13 §3). */

/* ---------- 1. the Stack Explorer ---------- */
.sx-app{display:grid;grid-template-columns:minmax(320px,30%) minmax(0,1fr);grid-template-rows:100vh;height:100vh;overflow:hidden}
.sx-side{min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(28px,4vh,48px);padding:clamp(28px,4vw,64px);padding-right:clamp(16px,2vw,32px);z-index:2}
.sx-desc{display:grid;gap:14px;min-height:300px;align-content:end;transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1)}
.sx-desc.sx-swap{opacity:0;transform:translateY(8px)}
.sx-dk{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#6b7567}
.sx-desc h2{margin:0;font:400 clamp(34px,3.2vw,52px)/1.02 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.sx-desc p{margin:0;max-width:30em;font-size:17px;line-height:1.5;color:#44503f;text-wrap:pretty}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sx-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(24,49,30,.16);font-size:13px;font-weight:500;color:#2c3a30;background:rgba(250,248,242,.7)}
.sx-rail-h{display:grid;grid-template-columns:44px minmax(0,1fr);padding-bottom:10px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#939b8e}
.sx-rail{display:grid;gap:2px;margin:0;padding:0;list-style:none;border-top:1px solid rgba(24,49,30,.14)}
.sx-rail button{display:grid;grid-template-columns:44px minmax(0,1fr) 10px;align-items:center;width:100%;height:46px;padding:0;border:0;border-bottom:1px solid rgba(24,49,30,.08);background:none;font:500 15px/1 var(--font-sans);color:#44503f;text-align:left;cursor:pointer;transition:color .2s}
.sx-rail button i{font:500 11px/1 var(--font-mono);font-style:normal;letter-spacing:.06em;color:#939b8e;transition:color .2s}
.sx-rail button::after{content:"";width:8px;height:8px;border-radius:50%;background:#18311e;transform:scale(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sx-rail button:hover,.sx-rail button[aria-current="true"]{color:#18311e}
.sx-rail button[aria-current="true"] i{color:#de6a4b}
.sx-rail button[aria-current="true"]::after{transform:scale(1)}
.sx-rail button:focus-visible{outline:2px solid #18311e;outline-offset:2px}
.sx-hint{font:400 12px/1.4 var(--font-mono);color:#939b8e}
.sx-vp{position:relative;min-width:0;background:radial-gradient(70% 70% at 55% 58%,#f9f6ee,#efe9dc)}
.sx-vp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#p9{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
@media (max-height:760px){.sx-desc{min-height:0;gap:10px}.sx-desc h2{font-size:clamp(28px,2.6vw,40px)}.sx-desc p{font-size:15.5px}.sx-chips span{height:26px;font-size:12px}.sx-rail button{height:34px;font-size:14px}.sx-rail-h{padding-bottom:6px}.sx-side{gap:18px;padding-top:18px;padding-bottom:18px}.sx-hint{display:none}}
@media (max-width:899px){.sx-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 70vh;height:auto;overflow:visible}.sx-side{overflow:visible}.sx-side{padding:28px 20px 8px}.sx-desc{min-height:0}.sx-vp{order:2}}
/* page fit (README-v13 §2.7.1): the reference's body is 16px/1.55; inside the page nothing may inherit the site's 17px/1.5,
   and the site's `p{text-wrap:pretty}` may not reach the hint, which wraps plainly in the reference */
.sx-app{font-size:16px;line-height:1.55;height:max(640px,min(calc(100vh - var(--nav)),920px));grid-template-rows:minmax(0,1fr)}
.sx-hint{text-wrap:auto}
@media (max-width:899px){.sx-app{height:auto;grid-template-rows:auto 70vh}} /* the reference's stacked rows, restated because the rule above comes later in this file */
/* page fit: v11's ground fades from the hero's pine to bone "deep into section 02", under the old story's transparent
   stage. The explorer's panel is transparent too, so the same fade now completes where the explorer's top edge is
   (the section's padding plus its 54px header) instead of 52vh into the section — the stops keep their proportions. */
:root{--sx-top:calc(clamp(88px,11vw,168px) + 18vh + 54px)}
html,body{background:linear-gradient(180deg,#142818 0,#142818 calc(var(--heroH,100vh) - 60px),#1d3323 var(--heroH,100vh),#4a5b4a calc(var(--heroH,100vh) + var(--sx-top)*.3077),#a7ad9c calc(var(--heroH,100vh) + var(--sx-top)*.6154),#e9e5d8 calc(var(--heroH,100vh) + var(--sx-top)*.8462),#f5f1e7 calc(var(--heroH,100vh) + var(--sx-top))) no-repeat,#f5f1e7}
/* no WebGL (README-v13 §0.4): a still of the assembled stack in the stage; the list still swaps the copy */
.sx-still{display:none}
.sx-app.sx-nogl .sx-still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- 2. the name section ---------- */
/* Tacit landing — "Why we're called Tacit" section (goes just before the footer).
   Scoped: every selector starts with .tn — safe to append to site/v12.css (or any later version). */
.tn{--tn-pine:#18311e;--tn-pine-deep:#112215;--tn-bone:#f5f1e7;--tn-ink2:#44503f;--tn-ink3:#6b7567;--tn-dk-ink:#f1efe4;--tn-dk-ink2:#c2cec1;--tn-dk-ink3:#8fa08d;--tn-coral:#de6a4b;--tn-pad-x:clamp(20px,6vw,96px)}
.tn *,.tn *::before,.tn *::after{box-sizing:border-box}
.tn-in{max-width:1360px;margin:0 auto;padding-left:var(--tn-pad-x);padding-right:var(--tn-pad-x)}
.tn-k{display:inline-flex;align-items:center;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tn-ink3)}
.tn-disp{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em}

/* part 1 — the definition (dark) */
.tn-def{background:var(--tn-pine-deep);color:var(--tn-dk-ink);padding:clamp(72px,9vw,112px) 0 clamp(64px,8vw,96px)}
.tn-def .tn-k{color:var(--tn-dk-ink3)}
.tn-word{margin:22px 0 0;font-size:clamp(72px,10vw,132px);line-height:.9;color:var(--tn-dk-ink)}
.tn-ph{margin-top:18px;display:flex;gap:18px;align-items:baseline;font:400 18px/1 var(--font-mono);color:var(--tn-dk-ink3)}
.tn-ph i{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--tn-dk-ink2)}
.tn-mean{margin:30px 0 0;max-width:16em;font:400 clamp(22px,2.4vw,30px)/1.25 var(--font-display);letter-spacing:-.03em;color:var(--tn-dk-ink);text-wrap:pretty}

/* part 2 — the explanation (light) */
.tn-ex{background:var(--tn-bone);color:var(--tn-pine);padding:clamp(64px,7vw,88px) 0 clamp(72px,8vw,96px)}
.tn-h{margin:0;max-width:20em;font-size:clamp(30px,3.4vw,44px);line-height:1.05;text-wrap:balance}
.tn-kinds{display:flex;align-items:center;gap:18px;margin-top:48px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tn-ink3);white-space:nowrap}
.tn-kinds::before,.tn-kinds::after{content:"";flex:1;height:1px}
.tn-kinds::before{background:linear-gradient(90deg,rgba(24,49,30,0),rgba(24,49,30,.18))}
.tn-kinds::after{background:linear-gradient(90deg,rgba(24,49,30,.18),rgba(24,49,30,0))}
.tn-row{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0 0;padding:0;list-style:none;border-radius:20px;overflow:hidden}
.tn-row::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(250,248,242,0) 0%,rgba(237,234,224,.35) 40%,rgba(232,223,236,.45) 72%,rgba(246,205,186,.34) 100%)}
.tn-row::after{content:"";position:absolute;right:-8%;top:-30%;width:46%;height:160%;z-index:-1;background:radial-gradient(closest-side,rgba(237,138,107,.1),rgba(237,138,107,0));animation:tn-glow 6s ease-in-out infinite}
@keyframes tn-glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.tn-c{display:grid;gap:12px;align-content:start;padding:28px 32px 30px}
.tn-c+.tn-c{border-left:1px solid rgba(24,49,30,.07)}
.tn-w{font-size:44px;line-height:1}
.tn-q{margin:0;max-width:18em;font:400 19px/1.45 var(--font-display);font-style:italic;text-wrap:pretty}
.tn-c:nth-child(1) .tn-w,.tn-c:nth-child(1) .tn-q{color:var(--tn-pine)}
.tn-c:nth-child(2) .tn-w{color:var(--tn-ink3)}
.tn-c:nth-child(2) .tn-q{color:var(--tn-ink2)}
.tn-c:nth-child(3) .tn-k{color:var(--tn-coral)}
.tn-c:nth-child(3) .tn-w{color:rgba(24,49,30,.2);filter:blur(.6px)}
.tn-c:nth-child(3) .tn-q{color:rgba(24,49,30,.36)}
.tn-dot{display:inline-block;width:10px;height:10px;margin-left:10px;border-radius:50%;background:var(--tn-coral)}
.tn-end{margin-top:56px;padding-top:28px;border-top:1px solid rgba(24,49,30,.16)}
.tn-end p{margin:0;font:400 clamp(22px,2.4vw,30px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--tn-pine);text-wrap:pretty}
.tn-end em{font-style:normal;color:var(--tn-coral)}

@media (max-width:760px){
 .tn-row{grid-template-columns:minmax(0,1fr)}
 .tn-c+.tn-c{border-left:0;border-top:1px solid rgba(24,49,30,.07)}
 .tn-row::before{background:linear-gradient(180deg,rgba(250,248,242,0) 0%,rgba(237,234,224,.35) 40%,rgba(232,223,236,.45) 72%,rgba(246,205,186,.34) 100%)}
 .tn-row::after{right:-20%;top:auto;bottom:-30%;width:120%;height:60%}
 .tn-w{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.tn-row::after{animation:none}}