/* Skill directory: uniform reading grid with prominent field tabs. */
.directory{background:#f3efe5}
.directory .directory-head{align-items:center}
.directory-head>div{max-width:760px}
.directory-head p{margin:0;color:#5d7281}
.directory-head h2{margin:10px 0 0;color:var(--night)}
.search{min-height:54px;align-items:center;border:1px solid rgba(11,33,55,.18);border-bottom-width:1px;border-radius:999px;background:rgba(255,253,247,.86);padding:0 18px;box-shadow:0 10px 28px rgba(7,26,46,.06)}
.search span{color:#607789;font-size:18px}
.search input{min-height:52px;font-size:15px}
.search input::placeholder{color:#8495a1}
.filters{position:sticky;top:12px;z-index:8;display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 26px;padding:10px;border:1px solid rgba(11,33,55,.14);border-radius:22px;background:rgba(255,253,247,.92);box-shadow:0 18px 42px rgba(7,26,46,.1);backdrop-filter:blur(10px)}
.filters button{min-height:44px;padding:0 18px;border:1px solid rgba(11,33,55,.2);border-radius:999px;background:#fff;color:#244356;font-size:13px;font-weight:750;letter-spacing:.02em;box-shadow:0 2px 0 rgba(11,33,55,.04);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.filters button:hover{transform:translateY(-1px);border-color:rgba(11,33,55,.38);box-shadow:0 8px 18px rgba(7,26,46,.1)}
.filters button.active{background:var(--night);border-color:var(--night);color:#fff;box-shadow:0 12px 26px rgba(7,26,46,.24)}
.filters button:focus-visible,.search input:focus-visible,.skill-card a:focus-visible{outline:3px solid rgba(99,223,202,.55);outline-offset:3px}
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;border:0;background:transparent}
.skill-card{position:relative;display:flex;flex-direction:column;min-height:342px;height:100%;padding:24px 24px 22px;border:1px solid rgba(11,33,55,.16);border-radius:22px;background:#fffdf7;box-shadow:0 12px 30px rgba(7,26,46,.06);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.skill-card:before{position:absolute;right:-58px;top:-70px;width:168px;height:168px;border:1px solid rgba(11,33,55,.1);border-radius:50%;box-shadow:0 0 0 22px rgba(11,33,55,.025),0 0 0 44px rgba(11,33,55,.016);content:"";transition:transform .45s ease}
.skill-card:hover{transform:translateY(-4px);border-color:rgba(11,33,55,.32);background:#fff;box-shadow:0 24px 54px rgba(7,26,46,.14)}
.skill-card:hover:before{transform:scale(1.14)}
.skill-card .card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#536f82;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.skill-card .pick{flex:0 0 auto;padding:6px 8px;border-radius:999px;background:var(--acid);color:#172b3b;font-size:9px;font-weight:850;letter-spacing:.1em}
.skill-card h3{position:relative;z-index:1;margin:34px 0 14px;color:var(--night);font-family:var(--display);font-size:clamp(25px,2.1vw,31px);font-weight:700;line-height:1.04;letter-spacing:-.025em;text-transform:uppercase}
.skill-card p{position:relative;z-index:1;display:-webkit-box;margin:0;color:#526c80;font-size:14px;line-height:1.62;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.skill-card .card-meta{position:relative;z-index:1;margin-top:auto;padding-top:22px;color:#61798a;font-size:11px;line-height:1.5}
.skill-card a{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(11,33,55,.14);color:var(--night);font-size:12px;font-weight:800;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.skill-card a span:last-child{transition:transform .2s ease}
.skill-card a:hover span:last-child{transform:translateX(3px)}
@media(max-width:1080px){.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.directory .directory-head{align-items:flex-start;flex-direction:column}.search{width:100%}}
@media(max-width:680px){.directory{padding-left:18px;padding-right:18px}.filters{top:8px;gap:8px;padding:8px;border-radius:18px}.filters button{min-height:40px;padding:0 14px;font-size:12px}.skill-grid{grid-template-columns:1fr}.skill-card{min-height:0}.skill-card h3{margin-top:28px}}