/* Tier list: header and the board */
.head{padding:56px 48px 28px;max-width:1184px;margin:0 auto}
.kicker{font:700 15px var(--h);letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.head h1{font:700 68px/.95 var(--h);text-transform:uppercase;margin-top:6px}
.head .intro p{margin-top:14px;max-width:560px;font-size:18px;color:var(--soft)}
.tl-prose{max-width:776px;margin:0 auto 64px;padding:0 48px}

.board{max-width:1184px;margin:0 auto 72px;padding:0 48px;display:grid;gap:3px}
.board:empty{display:none}
.row{background:var(--tile);border:1px solid var(--line)}
.rowtop{display:grid;grid-template-columns:190px 1fr 56px;min-height:178px}
.lab{display:grid;place-items:center;padding:12px;background:var(--c);color:var(--on);font:700 26px/1 var(--h);letter-spacing:.04em;text-transform:uppercase;text-align:center}
.items{display:flex;flex-wrap:wrap;gap:3px;padding:3px}
.item{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;align-content:start;width:150px;padding:12px 10px 10px;background:var(--sky1);border:1px solid transparent;transition:transform .15s,border-color .15s;animation:drop .5s cubic-bezier(.2,1,.3,1) both;animation-delay:var(--d)}
a.item:hover{border-color:var(--c);transform:translateY(-3px)}
.item img{height:104px;width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.item b{display:block;margin-top:8px;font:700 17px/1.05 var(--h);text-transform:uppercase;text-align:center}
.item small{display:block;font-size:12px;color:var(--dim);text-align:center}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}}
.why{display:grid;place-items:center;border-left:1px solid var(--line);color:var(--dim)}
.why:hover,.why[aria-expanded="true"]{color:var(--ink);background:var(--sky1)}
.why svg{width:18px;height:18px;transition:transform .2s}
.why[aria-expanded="true"] svg{transform:rotate(180deg)}
.text{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}
.text>div{overflow:hidden}
.row:not(.open) .text>div{visibility:hidden}
.row.open .text{grid-template-rows:1fr}
.text p{max-width:720px;margin:18px 24px 20px 214px;font:400 18px/1.65 var(--b);color:var(--soft)}

@media(max-width:900px){
 .head{padding:36px 16px 20px}.head h1{font-size:46px}.head .intro p{font-size:17px}
 .tl-prose{padding:0 16px}
 .board{padding:0 16px;margin-bottom:48px}
 .rowtop{grid-template-columns:1fr 52px;min-height:0}
 .lab{grid-column:1/-1;place-items:center start;padding:10px 14px;font-size:20px}
 .items{grid-column:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
 .item{width:auto}.item img{height:84px}.item b{font-size:15px}
 .text p{margin:14px 16px 18px;font-size:17px}
}