/* /learn/ index: L2 "elements" tiles (approved 2026-10-25). Design D. */
.lx{padding-top:clamp(24px,3vw,44px)}
.lx-k{font:500 12px var(--m);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 8px}
/* L2 elements */
.l2{margin-top:clamp(26px,3.4vw,48px);display:grid;grid-template-columns:2fr 9fr;gap:28px 22px}
.l2-g:nth-child(2){grid-column:2}.l2-g:nth-child(3){grid-column:1/-1}
.l2-g h2{font:500 11px var(--m);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 8px;border-bottom:3px solid var(--ink);padding-bottom:6px}
.l2-t{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.el{display:flex;flex-direction:column;justify-content:space-between;width:104px;height:112px;box-sizing:border-box;padding:8px 10px 10px;border:2px solid var(--ink);background:var(--sheet);text-decoration:none;transition:transform .15s}
.el-n{font:500 11px var(--m);color:var(--mut)}.el-s{font-weight:900;font-size:34px;letter-spacing:-.03em;line-height:1}.el-nm{font-size:12px;font-weight:600;line-height:1.15}
.el:hover{transform:translateY(-3px);border-color:var(--spot)}.el:hover .el-s{color:var(--spot)}
.l2-g:nth-child(3) .el{width:160px}
.l2-arts{margin-top:clamp(40px,5vw,72px)}.l2-arts h2{font-weight:900;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;margin:0;border-bottom:3px solid var(--ink);padding-bottom:8px}
.l2-arts ol{list-style:none;margin:0;padding:0}.l2-arts a{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--ink);text-decoration:none}.l2-arts b{font-weight:700;font-size:17px}.l2-arts span{font:500 13px var(--m);color:var(--mut)}.l2-arts a:hover b{color:var(--spot)}
@media(max-width:820px){.l2{grid-template-columns:1fr}.l2-g:nth-child(2){grid-column:1}}
@media(max-width:640px){ .el{width:calc(33.33% - 6px);height:96px}.l2-g:nth-child(3) .el{width:calc(33.33% - 6px)}.el-s{font-size:28px}.l2-t{gap:8px}}
.l2{grid-template-columns:auto minmax(0,1fr)}.el{width:100px}.el-s.long{font-size:25px}
@media(max-width:820px){.l2{grid-template-columns:1fr}}
@media(max-width:640px){.el,.l2-g:nth-child(3) .el{width:calc(33.33% - 6px)}.el-s.long{font-size:21px}}
@media(max-width:640px){.l2-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.el,.l2-g:nth-child(3) .el{width:auto;height:84px;padding:6px 7px 8px}.el-s{font-size:24px}.el-s.long{font-size:17px}.el-nm{font-size:10.5px}.l2-g:nth-child(3) .l2-t{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* live: tighter rhythm */
.l2{margin-top:clamp(20px,2.4vw,32px)}.l2-arts{margin-top:clamp(28px,3vw,44px)}.l2-arts+.bx-med{margin-top:18px}