/* The blog archive: Knowledge Base (home.php), category and tag (Website/Design/projects/blog-index, 2026-10-21),
   from the prototype proto/_template.html, scoped to .kbx; built by tools/build_kb_archive_css.py, edit the source
   and rebuild. <main> also has .ct (base.css); the prototype's tokens are aliased to base.css's, and the side
   gutter follows the site's (--ct-px: 20 px, the ~640 column on tablets, 32 px from 900). The card rules also
   serve the thank-you page (.cty), whose cards come from the same template-parts/kb-card.php. */
.kbx,.cty{--navy:var(--ct-navy);--ink:var(--ct-ink);--text:var(--ct-text);--line:var(--ct-line);--rule:var(--ct-rule);--grey:var(--ct-grey);--muted:var(--ct-muted);--serif:var(--ct-serif);--sans:var(--ct-sans);--rc:var(--ct-rc);--px:var(--ct-px)}
.kbx .wrap{max-width:1264px;margin:0 auto;padding:0 var(--px)}
.kbx .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- first screen: navy band; words (.hl), the finder (.find), the category chips (.fc) ---------- */
.kbx .kbhero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.kbx .kbhero .wrap{position:relative;padding-top:24px;padding-bottom:24px}
.kbx .halo2{position:absolute;right:-200px;top:-170px;width:460px;height:460px;color:#fff;opacity:.06;pointer-events:none}
.kbx .kbh1{margin:0;font:400 32px/1.1 var(--serif);color:#fff;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.kbx .kbh1 .pre{display:block;margin-bottom:6px;font:400 15px/1.3 var(--sans);color:rgba(255,255,255,.72)}
.kbx .kbdesc{margin:12px 0 0;font:400 15.5px/1.55 var(--sans);color:rgba(255,255,255,.86);max-width:36em}
/* tag = one type: its sign, the H1, the MBTI code and socionics name, a link to the type's page */
.kbx .tyhead{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center}
.kbx .tyhead .tsg{width:64px;height:64px;color:#fff}
.kbx .tyhead .tsg svg{width:100%;height:100%}
.kbx .tymeta,.kbx .tylink{grid-column:1/-1}
.kbx .tymeta{margin:14px 0 0;font:400 14.5px/1.4 var(--sans);color:rgba(255,255,255,.78);font-variant-numeric:lining-nums}
.kbx .tymeta b{font-weight:500;color:#fff;letter-spacing:.04em}
.kbx .tylink{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;color:#fff;font:500 15px/1.3 var(--sans);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px}
.kbx .tylink svg{width:18px;height:18px;flex:none}
.kbx .tylink:hover{text-decoration-color:#fff}
.kbx .kbhero a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* ---------- the finder: the 16 signs → the tag pages (4×4, one row per quadra) ---------- */
.kbx .find{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.kbx .find h2{margin:0 0 8px;font:400 20px/1.2 var(--serif);color:#fff}
.kbx .fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:2px 0;margin:0 -6px;padding:0;list-style:none}
.kbx .fg a,.kbx .fg .cur{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:4px 0 6px;border-radius:12px;color:#fff;text-decoration:none;text-align:center;touch-action:manipulation}
.kbx .fg svg{width:38px;height:38px;border-radius:50%;opacity:.8}
.kbx .fg span{font:400 11px/1.2 var(--sans);letter-spacing:-.01em;color:rgba(255,255,255,.8);text-wrap:balance;max-width:100%}
/* the current type (tag pages): the sign inverted, a thin ring round the cell — never only a tint */
.kbx .fg [aria-current] svg{background:#fff;color:var(--navy);opacity:1}
.kbx .fg [aria-current]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.kbx .fg [aria-current] span{color:#fff}
.kbx .fg a:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (max-width:359px){.kbx .fg span{font-size:10.5px;letter-spacing:-.02em}}
/* categories and the general tag: chips; on phones one line to swipe */
.kbx ul.fc{display:flex;gap:8px;margin:14px calc(-1 * var(--px)) 0;padding:0 var(--px) 2px;overflow-x:auto;scrollbar-width:none;list-style:none}
.kbx ul.fc::-webkit-scrollbar{display:none}
.kbx ul.fc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;text-decoration:none;white-space:nowrap;font:400 14px/1 var(--sans);touch-action:manipulation}
.kbx ul.fc a i{font-style:normal;color:rgba(255,255,255,.6);font-variant-numeric:lining-nums tabular-nums}
.kbx ul.fc a[aria-current]{background:#fff;color:var(--navy);border-color:#fff}
.kbx ul.fc a[aria-current] i{color:var(--muted)}
/* tag pages: the 4×4 is desktop-only (the phone has the strip under the list) */
.kbx .find.tf{display:none}

/* ---------- the list ---------- */
.kbx .kblist{background:#fff;padding:22px 0 8px}
.kbx .kbl{margin:0 0 12px;font:400 24px/1.2 var(--serif);color:var(--navy)}
.kbx .cards{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.kbx .cards>li{display:flex}

/* the pair mark: the article's two types as two signs that overlap, like two lenses */
:is(.kbx,.cty) .pm{display:flex;align-items:center}
:is(.kbx,.cty) .pm .s{display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--navy)}
:is(.kbx,.cty) .pm .s svg{width:100%;height:100%}
:is(.kbx,.cty) .pm.gen .s{color:var(--ink)}

/* the card: the photo whole (its right part is empty by design), the pair sits up in that empty part;
   the title is the only link, stretched over the whole card */
:is(.kbx,.cty) .ka{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--rc);background:#fff}
:is(.kbx,.cty) .ka .im{position:relative;background:#EDEDED}
:is(.kbx,.cty) .ka .im img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:left center}
:is(.kbx,.cty) .ka .im .pm{position:absolute;right:5%;top:9%}
:is(.kbx,.cty) .ka .im .pm .s{width:54px;height:54px;padding:3px;box-shadow:0 0 0 1px rgba(40,66,87,.16),0 6px 16px -8px rgba(20,30,45,.55)}
:is(.kbx,.cty) .ka .im .pm .s+.s{margin-left:-12px}
:is(.kbx,.cty) .ka .ab{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 16px 18px}
:is(.kbx,.cty) .ka :is(h2,h3){margin:0;font:400 20px/1.22 var(--serif);color:var(--navy);text-wrap:pretty}
:is(.kbx,.cty) .ka :is(h2,h3) a{color:inherit;text-decoration:none}
:is(.kbx,.cty) .ka :is(h2,h3) a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
:is(.kbx,.cty) .ka:has(a:focus-visible){outline:2px solid var(--navy);outline-offset:3px}
:is(.kbx,.cty) .ka :is(h2,h3) a:focus-visible{outline:none}
:is(.kbx,.cty) .kmt,:is(.kbx,.cty) .dt{margin:0;font:400 13px/1.35 var(--sans);color:var(--muted);font-variant-numeric:lining-nums}
:is(.kbx,.cty) .ds{margin:0;font:400 14.5px/1.5 var(--sans);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(.kbx,.cty) .ka .dt{margin-top:auto;padding-top:2px}
@media (hover:hover){:is(.kbx,.cty) .ka{transition:box-shadow .2s,translate .2s}:is(.kbx,.cty) .ka:has(a:hover){translate:0 -2px;box-shadow:0 16px 28px -22px rgba(40,66,87,.5)}}

/* ---------- pages: rings; the current one a double ring (WordPress classes: page-numbers, current, dots, prev, next) ---------- */
.kbx .pgn{display:flex;justify-content:center;align-items:center;gap:4px;padding:28px 0 44px;font:400 17px/1 var(--serif);font-variant-numeric:lining-nums}
.kbx .pgn .page-numbers{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--navy);text-decoration:none;touch-action:manipulation}
.kbx .pgn a.page-numbers{box-shadow:inset 0 0 0 1px var(--rule)}
.kbx .pgn a.page-numbers:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.kbx .pgn .current{background:var(--navy);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--navy)}
.kbx .pgn .dots{width:16px;color:var(--muted)}
.kbx .pgn svg{width:20px;height:20px}
.kbx .pgn a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.kbx .pgn.d{display:none}
@media (min-width:600px){.kbx .pgn.m{display:none}.kbx .pgn.d{display:flex}}

/* tag page, phones: the other types under the list, a strip to swipe; the current one is not a link */
.kbx .more{background:var(--grey);border-top:1px solid var(--line);padding:28px 0 32px}
.kbx .more h2{margin:0 0 12px;font:400 22px/1.2 var(--serif);color:var(--navy)}
.kbx ul.fs{display:flex;gap:8px;margin:0 calc(-1 * var(--px));padding:2px var(--px) 4px;overflow-x:auto;scrollbar-width:none;list-style:none}
.kbx ul.fs::-webkit-scrollbar{display:none}
.kbx ul.fs a,.kbx ul.fs .cur{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 5px;border:1px solid var(--rule);border-radius:999px;color:var(--navy);text-decoration:none;white-space:nowrap;font:400 14px/1 var(--sans)}
.kbx ul.fs svg{width:34px;height:34px;flex:none}
.kbx ul.fs .cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.kbx ul.fs a:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

@media (forced-colors:active){
 .kbx [aria-current]{outline:2px solid Highlight;outline-offset:2px}
 :is(.kbx,.cty) .pm .s{forced-color-adjust:none}
}

/* ===== TABLET (600-899): the site's ~640 px column; cards two by two, the signs 8 × 2 ===== */
@media (min-width:600px) and (max-width:899px){
 .kbx .kbhero .wrap,.kbx .kblist .wrap,.kbx .more .wrap{padding-inline:max(20px,calc((100% - 640px) / 2))}
 .kbx ul.fc,.kbx ul.fs{margin-inline:calc(-1 * max(20px,(100vw - 640px) / 2));padding-inline:max(20px,calc((100vw - 640px) / 2))}
 .kbx .kbhero .wrap{padding-top:36px;padding-bottom:36px}
 .kbx .kbh1{font-size:40px}
 .kbx .fg{grid-template-columns:repeat(8,minmax(0,1fr))}
 .kbx .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
 :is(.kbx,.cty) .ka :is(h2,h3){font-size:19px}
}

/* ===== DESKTOP (≥900): words and chips left, the 16 signs in a framed sheet right; articles in three columns ===== */
@media (min-width:900px){
 .kbx .kbhero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-rows:1fr auto auto 1fr;column-gap:72px;padding-top:40px;padding-bottom:40px}
 .kbx .hl{grid-area:2/1}
 .kbx ul.fc{grid-area:3/1;flex-wrap:wrap;margin:28px 0 0;padding:0;overflow:visible;align-self:start}
 .kbx .find,.kbx .find.tf{grid-column:2;grid-row:1/5;display:block;margin:0;padding:22px 26px 18px;border:1px solid rgba(255,255,255,.18);border-radius:var(--rc);background:rgba(255,255,255,.035);outline:1px solid rgba(255,255,255,.10);outline-offset:-8px}
 .kbx .halo2{right:auto;left:-180px;top:-300px;width:760px;height:760px}
 .kbx .kbh1{font-size:52px;line-height:1.06}
 .kbx .kbh1 .pre{margin-bottom:12px;font-size:17px}
 .kbx .kbdesc{margin-top:20px;font-size:17px;line-height:1.6;max-width:30em}
 .kbx .find h2{margin:0 0 10px 6px;font-size:24px}
 .kbx .fg{gap:2px 4px}
 .kbx .fg a,.kbx .fg .cur{gap:6px;padding:5px 2px 7px}
 .kbx .fg svg{width:44px;height:44px}
 .kbx .fg span{font-size:13px;letter-spacing:0}
 @media (hover:hover){
  .kbx .fg a,.kbx ul.fc a{transition:background .18s}
  .kbx .fg a:hover{background:rgba(255,255,255,.08)}
  .kbx .fg a:hover svg{opacity:1}
  .kbx ul.fc a:hover{background:rgba(255,255,255,.08)}
 }
 /* the tag head: the sign spans three rows, the H1, meta and link share one left edge */
 .kbx .tyhead{grid-template-columns:112px minmax(0,1fr);column-gap:28px}
 .kbx .tyhead .tsg{grid-row:1/4;width:112px;height:112px}
 .kbx .tymeta,.kbx .tylink{grid-column:2}
 .kbx .tymeta{margin-top:16px;font-size:16px}
 .kbx .tylink{margin-top:6px;font-size:16px}

 .kbx .kblist{padding:56px 0 16px}
 .kbx .kbl{margin-bottom:22px;font-size:32px}
 .kbx .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
 :is(.kbx,.cty) .ka :is(h2,h3){font-size:21px;text-wrap:balance}
 :is(.kbx,.cty) .ka .ab{padding:20px 22px 22px}
 /* an archive with one post (the theory): one wide card, the photo left */
 .kbx .cards:has(>li:only-child){grid-template-columns:1fr}
 .kbx .cards>li:only-child .ka{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .kbx .cards>li:only-child .im img{height:100%}
 .kbx .cards>li:only-child .ab{padding:36px 40px;justify-content:center}
 .kbx .cards>li:only-child .ka :is(h2,h3){font-size:30px}
 .kbx .cards>li:only-child .ka .dt{margin-top:8px}
 .kbx .pgn{gap:8px;padding:56px 0 96px}
 .kbx .more{display:none}
}
@media (min-width:900px) and (max-width:1099px){
 .kbx .kbhero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:40px;padding-top:36px;padding-bottom:36px}
 .kbx .kbh1{font-size:42px}
 .kbx .find,.kbx .find.tf{padding:20px 16px 16px}
 .kbx .fg svg{width:42px;height:42px}
 .kbx .fg span{font-size:11.5px}
 .kbx .tyhead{grid-template-columns:84px minmax(0,1fr);column-gap:20px}
 .kbx .tyhead .tsg{width:84px;height:84px}
 .kbx .cards{gap:24px 20px}
 :is(.kbx,.cty) .ka :is(h2,h3){font-size:19px}
 :is(.kbx,.cty) .ka .ab{padding:16px 16px 18px}
 :is(.kbx,.cty) .ka .im .pm .s{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){:is(.kbx,.cty) .ka{transition:none}:is(.kbx,.cty) .ka:has(a:hover){translate:none}}