.project-note{max-width:620px;margin:-42px 0 55px;color:#6f6c71;line-height:1.8}.category-list{border-top:1px solid var(--ink)}.category{border-bottom:1px solid var(--line);overflow:hidden;outline:none}.category-summary{min-height:150px;display:grid;grid-template-columns:60px 1fr 140px 34px;gap:24px;align-items:center;cursor:pointer;transition:.25s}.category-summary>span,.category-summary>b{font-size:11px;color:#888;letter-spacing:.12em}.category-summary small{font-size:10px;letter-spacing:.16em;color:var(--violet)}.category-summary h3{font-size:clamp(36px,5vw,72px);letter-spacing:-.05em;margin:6px 0}.category-summary i{font-size:30px;font-style:normal;transition:.3s}.category:hover .category-summary,.category:focus-within .category-summary,.category.open .category-summary{padding-left:14px;color:var(--violet)}.category:hover .category-summary i,.category:focus-within .category-summary i,.category.open .category-summary i{transform:rotate(45deg)}.category-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;max-height:0;opacity:0;transition:max-height .55s cubic-bezier(.22,1,.36,1),opacity .25s,padding .4s;padding:0}.category:hover .category-panel,.category:focus-within .category-panel,.category.open .category-panel{max-height:850px;opacity:1;padding:0 0 38px}.category-panel>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111;border-radius:18px;display:block}.category-projects{border-top:1px solid var(--line)}.category-projects a{display:grid;grid-template-columns:42px 1fr 30px;gap:16px;align-items:center;padding:19px 6px;border-bottom:1px solid var(--line);transition:.2s}.category-projects a:hover{padding-left:16px;background:#fff}.category-projects a>span{font-size:10px;color:#999}.category-projects strong{display:block;font-size:17px;margin-bottom:6px}.category-projects small{display:block;color:#888;font-size:11px}.category-projects em{font-style:normal;color:var(--violet);font-size:20px}@media(max-width:800px){.project-note{margin:-25px 0 35px}.category-summary{grid-template-columns:34px 1fr 28px;min-height:110px;gap:12px}.category-summary>b{display:none}.category-summary h3{font-size:36px}.category-panel{grid-template-columns:1fr}.category:hover .category-panel,.category:focus-within .category-panel,.category.open .category-panel{max-height:1300px}.category-projects a{grid-template-columns:30px 1fr 22px}.category-panel>img{border-radius:12px}}
