/* The all-types page (Website/Design/projects/types-index, 2026-10-20, addendum 1), from the prototype
   proto/_template.html, scoped to .tix; built by tools/build_types_index_css.py, edit the source and rebuild.
   The tokens are the header's (css/site-chrome.css), repeated for the page. */
.tix{--navy:#284257;--ink:#194C8E;--text:#434244;--muted:#6B7280;--grey:#F7F7F7;--line:#E6E8EB;--rule:#D8D8D8;
  --rb:10px;--rc:18px;--rm:12px;--px:20px;--serif:"EB Garamond",Georgia,serif;--sans:"Roboto",system-ui,sans-serif;
  display:block;font:400 16px/1.55 var(--sans);color:var(--text);background:#fff}
@media (min-width:900px){ .tix{--px:32px} }
.tix,.tix *,.tix *::before,.tix *::after{box-sizing:border-box}
/* the site's style.css unsets a and button: back to normal inside the page */
.tix a,.tix button{all:revert;box-sizing:border-box;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tix a{text-decoration:none}
.tix button{background:none;border:0;padding:0;margin:0}
.tix h1,.tix h2,.tix h3{margin:0;font-weight:400}
.tix p,.tix ul,.tix figure{margin:0}
.tix svg{display:block}
.tix :focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.tix{--cw:1264px}
.tix .wrap{max-width:var(--cw);margin:0 auto;padding:0 var(--px)}

/* first screen */
.tix .thero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.tix .thero .wrap{padding-top:28px;padding-bottom:32px;max-width:640px}
.tix .th1{margin:0;font:400 32px/1.12 var(--serif);text-wrap:balance}
.tix .tintro{margin:14px 0 0;font:400 15.5px/1.55 var(--sans);color:rgba(255,255,255,.85)}
.tix .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:0 24px;border-radius:var(--rb);font:500 16px/1.2 var(--sans);text-decoration:none}
.tix .btn svg{width:18px;height:18px}
.tix .btn.rest::after{animation-play-state:paused;opacity:0}
.tix .halo2{position:absolute;right:-180px;top:-120px;width:520px;height:520px;color:#fff;opacity:.06;pointer-events:none}

/* quadra chips, sticky under the first screen */
.tix .qbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.tix .qbar .in{display:flex;gap:6px;max-width:var(--cw);margin:0 auto;padding:8px var(--px);overflow-x:auto;scrollbar-width:none}
.tix .qbar a{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font:400 17px/1 var(--serif);color:var(--navy)}
.tix .qbar a:focus-visible{outline-offset:2px;border-radius:999px}
.tix .qbar a.on{background:var(--navy);border-color:var(--navy);color:#fff}

.tix .found{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;min-height:80px;border-radius:var(--rm);background:rgba(255,255,255,.08);color:#fff}
.tix .found svg{width:56px;height:56px}
.tix .found b{display:block;font:400 24px/1.1 var(--serif)}
.tix .found small{display:block;margin-top:3px;font:400 13px/1.3 var(--sans);color:rgba(255,255,255,.72)}
.tix .found .go{width:22px;height:22px}
.tix .found .go svg{width:22px;height:22px}
.tix .found.empty{grid-template-columns:1fr;font:400 14px/1.4 var(--sans);color:rgba(255,255,255,.7)}

/* the grid of 16: a tap (touch) or hover (desktop) previews the type */
.tix .g16{margin-top:22px}
.tix .g16 .row{display:grid;grid-template-columns:52px repeat(4,1fr);align-items:center;gap:6px;padding:4px 0}
.tix .g16 .row+.row{border-top:1px solid rgba(255,255,255,.12)}
.tix .g16 .qn{font:400 15px/1.1 var(--serif);color:rgba(255,255,255,.7)}
.tix .g16 a{display:grid;place-items:center;aspect-ratio:1;max-width:64px;justify-self:center;width:100%;padding:4px;border:0;border-radius:50%;background:none;color:#fff;opacity:.62;cursor:pointer;transition:opacity .2s,background .2s}
.tix .g16 a svg{width:100%;height:100%}
.tix .g16 a.sel{opacity:1;background:rgba(255,255,255,.12)}
.tix .g16 a:focus-visible{opacity:1;outline:2px solid rgba(255,255,255,.75);outline-offset:2px;border-radius:50%}
.tix .thero :focus-visible{outline-color:#fff}
.tix .found.empty{cursor:default}
.tix .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the atlas */
.tix .atlas{padding:8px 0 40px;background:#fff}
.tix .qsec{scroll-margin-top:60px;padding-top:30px}
.tix .qsec h2{margin:0;font:400 30px/1.15 var(--serif);color:var(--navy)}
.tix .qsec .qd{margin:8px 0 6px;font:400 15.5px/1.55 var(--sans);color:var(--muted)}
.tix .tl{list-style:none;margin:0;padding:0}
.tix .tl li{border-top:1px solid var(--line)}
.tix .tl li:first-child{border-top:0}
.tix .tl a{display:grid;grid-template-columns:48px 1fr 18px;grid-template-areas:"sg hd ar" ". mt .";column-gap:14px;align-items:start;padding:16px 0;color:inherit}
.tix .tl svg.sg{grid-area:sg}
.tix .tl .hd{grid-area:hd}
.tix .tl .mt{grid-area:mt}
.tix .tl .ar{grid-area:ar}
.tix .tl a:focus-visible{outline-offset:-2px;border-radius:12px}
.tix .tl svg.sg{width:48px;height:48px;color:var(--navy)}
.tix .tl b{display:block;font:400 24px/1.1 var(--serif);color:var(--navy)}
.tix .tl .codes{display:block;margin-top:4px;font:500 12px/1.3 var(--sans);letter-spacing:.06em;color:var(--muted)}
.tix .tl .mt{display:block;margin-top:8px;font:400 15.5px/1.5 var(--sans);color:var(--text)}
.tix .tl .ar{width:18px;height:18px;margin-top:6px;color:var(--ink)}

/* closing */
.tix .tfin{padding:48px 0 52px;background:var(--grey);text-align:center}
.tix .tfin h2{margin:0 auto 20px;max-width:16em;font:400 28px/1.18 var(--serif);color:var(--navy)}
.tix .tfin .sheet{display:block}
.tix .tfin .mk{display:none}
.tix .tfin .btn::after{content:"";position:absolute;left:0;top:0;width:22px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75);offset-path:inset(0 round var(--rb));offset-rotate:auto;offset-anchor:100% 50%;animation:tixRun 4.5s linear infinite}
.tix .tfin .btn.rest::after{animation-play-state:paused;opacity:0}
.tix .tfin .btn{background:linear-gradient(#2D5A9E,#194C8E 62%);border:1px solid #173f73;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.tix .found .fm{display:none}

/* ===== DESKTOP (≥900): the shared grid, container 1264 = 1200 + 2×32 =====
   Hero: words and the preview card on the left, the grid of 16 on the right; hover or focus previews,
   a click opens the type page. Atlas: each quadra is a band, its name and description on the left,
   its four types as a 2×2 of cards on the right. */
@media (min-width:900px){
 .tix .thero .wrap{max-width:var(--cw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-rows:auto auto 1fr;column-gap:56px;padding-top:56px;padding-bottom:64px}
 .tix .th1{grid-column:1;font-size:44px;line-height:1.08;max-width:11em}
 .tix .tintro{grid-column:1;margin-top:18px;max-width:30em}
 .tix .g16{grid-column:2;grid-row:1 / 4;margin-top:0;align-self:center}
 .tix .g16 .row{grid-template-columns:92px repeat(4,1fr);gap:10px;padding:8px 0}
 .tix .g16 .qn{font-size:18px}
 .tix .g16 a{max-width:92px;padding:8px}
 .tix .g16 a:hover{opacity:1}
 .tix .found{grid-column:1;align-self:end;margin-top:32px;grid-template-columns:88px 1fr 28px;gap:20px;padding:22px 24px;min-height:150px;border-radius:var(--rc);border:1px solid rgba(255,255,255,.16);transition:background .2s}
 .tix .found:hover{background:rgba(255,255,255,.12)}
 .tix .found svg{width:88px;height:88px}
 .tix .found b{font-size:34px}
 .tix .found small{margin-top:6px;font-size:14px}
 .tix .found .fm{display:block;margin-top:10px;font:400 16px/1.5 var(--sans);color:rgba(255,255,255,.9)}
 .tix .found .go,.tix .found .go svg{width:26px;height:26px}
 .tix .halo2{right:-120px;top:-160px;width:760px;height:760px}

 .tix .qbar .in{justify-content:center;gap:10px;padding:10px var(--px)}
 .tix .qbar a{min-height:40px;padding:0 20px;font-size:19px}
 .tix .qbar a:hover{border-color:var(--navy)}

 .tix .atlas{padding:40px 0 72px}
 .tix .qsec{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:56px;padding:56px 0;scroll-margin-top:70px}
 .tix .qsec+.qsec{border-top:1px solid var(--line)}
 .tix .qsec>div:first-child{align-self:start;position:sticky;top:90px}
 .tix .qsec h2{font-size:38px}
 .tix .qsec .qd{margin-top:12px;font-size:16px}
 .tix .tl{display:grid;grid-template-columns:1fr 1fr;gap:16px}
 .tix .tl li,.tix .tl li:first-child{border:1px solid var(--line);border-radius:var(--rc);transition:border-color .2s,box-shadow .2s}
 .tix .tl li:hover{border-color:#C9D2DC;box-shadow:0 10px 24px -18px rgba(40,66,87,.5)}
 .tix .tl a{height:100%;box-sizing:border-box;grid-template-columns:56px 1fr 18px;gap:16px;padding:22px 22px 24px}
 .tix .tl svg.sg{width:56px;height:56px}
 .tix .tl b{font-size:27px}
 .tix .tl li:hover .ar{transform:translateX(3px)}
 .tix .tl .ar{transition:transform .2s}
 .tix .tl a:focus-visible{outline:none}
 .tix .tl li:has(a:focus-visible){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
 .tix .qbar a{flex:0 0 auto}

 .tix .tfin{padding:72px 0 80px}
 .tix .tfin h2{font-size:38px}
 .tix .tfin .btn{width:auto;min-width:300px}
}
@media (min-width:900px) and (max-width:1099px){
 .tix .thero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:36px}
 .tix .th1{font-size:38px}
 .tix .g16 .row{grid-template-columns:72px repeat(4,1fr);gap:6px}
 .tix .g16 .qn{font-size:16px}
 .tix .found{grid-template-columns:64px 1fr 24px;gap:16px;padding:18px 20px}
 .tix .found svg{width:64px;height:64px}
 .tix .found b{font-size:28px}
 .tix .qsec{grid-template-columns:1fr;row-gap:20px}
 .tix .qsec>div:first-child{position:static}
 .tix .qsec h2{font-size:32px}
 .tix .qsec .qd{max-width:40em;font-size:15px}
 .tix .tl a{grid-template-columns:44px 1fr 18px;gap:12px;padding:18px}
 .tix .tl svg.sg{width:44px;height:44px}
 .tix .tl b{font-size:24px}
}
/* tablet 600-899: one text column, aligned with the hero */
@media (min-width:600px) and (max-width:899px){
 .tix .qbar .in,.tix .atlas .wrap,.tix .tfin .wrap{max-width:680px}
 .tix .qbar a{flex:0 0 auto}
 .tix .qbar .in{justify-content:center}
 .tix .g16 a{max-width:80px}
}
/* atlas cards: the motto runs the card's full width; hover/focus fills the sign as in the grid, no shadow lift */
@media (min-width:900px){
 .tix .tl a{grid-template-areas:"sg hd ar" "mt mt mt"}
 .tix .tl .mt{margin-top:14px}
 .tix .tl li:hover{box-shadow:none}
 .tix .tl svg.sg{border-radius:50%;transition:color .2s,background .2s}
 .tix .tl li:hover svg.sg,.tix .tl a:focus-visible svg.sg{color:#fff;background:var(--navy)}
}
/* the closing as an offer sheet (DESIGN.md: framed white sheet + a mark on the right) */
@media (min-width:900px){
 .tix .tfin{text-align:left}
 .tix .tfin .sheet{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;max-width:880px;margin:0 auto;padding:44px 56px;box-sizing:border-box;background:#fff;border:1px solid var(--navy);border-radius:var(--rc);outline:1px solid var(--line);outline-offset:-8px}
 .tix .tfin h2{margin:0 0 22px;max-width:none}
 .tix .tfin .mk{display:grid;place-items:center;width:132px;height:132px;border:1px solid var(--navy);border-radius:50%;box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 8px var(--line);font:300 72px/1 var(--sans);color:var(--navy)}
}
/* the empty card keeps the filled card's shape — an empty ring where the sign will be */
.tix .found.empty{grid-template-columns:56px 1fr}
.tix .found.empty::before{content:"";width:52px;height:52px;border:1px dashed rgba(255,255,255,.4);border-radius:50%}
@media (prefers-reduced-motion:reduce){ .tix .btn::after{display:none} .tix .tl .ar,.tix .tl li,.tix .g16 a{transition:none} .tix .tl li:hover .ar{transform:none} }

.tix .found b,.tix .found small,.tix .found .fm{color:inherit}
@media (prefers-reduced-motion:reduce){ .tix .tl li,.tix .tl li:first-child,.tix .tl svg.sg,.tix .found{transition:none} }

@keyframes tixRun{from{offset-distance:0%}to{offset-distance:100%}}