.use{padding-block:var(--space-xxl) 80px}.use .wrap{max-width:calc(var(--width-text) + 2 * var(--space-screen));gap:var(--space-xxl);display:grid}.use .kind{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);background:var(--kind-soft);color:var(--kind);font-size:var(--text-small);justify-self:start;font-weight:600}.use header{gap:var(--space-md);display:grid}.use h1{font-size:var(--text-display);letter-spacing:-.8px;text-wrap:balance;font-weight:800;line-height:1.25}.use .lede{font-size:var(--text-body-lg);color:var(--ink-soft)}.use .cards{gap:var(--space-md);display:grid}.use .card{gap:var(--space-sm);padding:var(--space-xl) var(--space-screen);border-radius:var(--radius-sheet);background:var(--surface);transition:transform .2s;display:grid}.use .card:hover{transform:translateY(-2px)}.use .card h2{font-size:var(--text-title);letter-spacing:-.3px;font-weight:700}.use .card p{color:var(--ink-soft)}.use .crumb{font-size:var(--text-small);color:var(--ink-faint)}.use .crumb a:hover{color:var(--ink);text-decoration:underline}.use .body{gap:var(--space-md);color:var(--ink-soft);font-size:var(--text-body-lg);line-height:1.6;display:grid}.use .body section{gap:var(--space-md);display:grid}.use .body h2{margin-top:var(--space-lg);font-size:var(--text-title);letter-spacing:-.3px;color:var(--ink);font-weight:700;line-height:1.3}.use .body ul{padding-left:var(--space-screen);gap:6px;list-style:outside;display:grid}.use .shots{gap:var(--space-xl) var(--space-lg);margin-top:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.use .shot{max-width:var(--width-shot);gap:var(--space-sm);align-content:start;margin:0;display:grid}.use .shot img{border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--surface);width:100%;height:auto}.use .shot figcaption{font-size:var(--text-small);color:var(--ink-faint);line-height:1.5}.use .more{gap:var(--space-md);display:grid}.use .more h2{font-size:var(--text-body-lg);font-weight:700}.use .list{padding:var(--space-sm) var(--space-screen);border-radius:var(--radius-card);background:var(--surface)}.use .list a{justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0;border-top:1px solid var(--line);display:flex}.use .list li:first-child a{border-top:0}.use .list a:after{content:"›";color:var(--ink-faint)}.use .list a:hover{color:var(--primary)}@media (min-width:760px){.use{padding-block:48px 96px}.use h1{font-size:var(--text-display-lg);letter-spacing:-1.2px}.use .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.use[data-page=index] .wrap{max-width:var(--width-site)}.use .card{padding:var(--space-xl);align-content:start}}