/* tools.html: tools I use. One glass frame per group, one row per tool: number, what it is, where it was seen, the link. */
.tl-hero h1{max-width:14ch}
.tl-hero .lede{margin-top:28px}
.tl-group{padding:clamp(26px,4vw,52px); border-radius:24px}
.tl-list{list-style:none; margin:clamp(18px,2vw,26px) 0 0; padding:0}
.tl-row{display:grid; grid-template-columns:clamp(64px,7vw,96px) minmax(0,1fr) auto; gap:12px 26px; align-items:center; padding:22px 0; border-top:1.5px dashed var(--dash)}
.tl-row:first-child{border-top:0}
.tl-row .thin-num{font-size:clamp(44px,4.4vw,64px)}
.tl-what h3{font-size:clamp(21px,2vw,26px)}
.tl-what .muted{margin-top:4px; font-size:16px}
.tl-seen{margin-top:8px; font-size:15px}
.tl-seen .k{color:var(--ink-muted)} .tl-seen .k::after{content:":"}
.tl-seen a{color:var(--ink)}
.tl-link{font-size:14px}
.ph{font-weight:500}
@media (max-width:760px){ .tl-row{grid-template-columns:56px minmax(0,1fr); align-items:start} .tl-row .thin-num{margin-top:4px} .tl-link{grid-column:2} }
.tl-disclose{display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,22vw,300px); gap:26px 52px; align-items:start}
.tl-disclose .muted{max-width:62ch; font-size:16px}
.tl-disclose b{font-weight:500; color:var(--ink)}
@media (max-width:860px){ .tl-disclose{grid-template-columns:minmax(0,1fr)} }

/* plain list of links (no cards) */
.tl-plain{list-style:none; margin:18px 0 0; padding:0; max-width:860px}
.tl-plain li{padding:16px 0; border-top:1px solid var(--rule, rgba(10,15,20,.16))}
.tl-plain li:last-child{border-bottom:1px solid var(--rule, rgba(10,15,20,.16))}
.tl-plain h3{margin:0 0 4px; font-size:21px; font-weight:500}
.tl-plain h3 a{color:inherit; text-underline-offset:3px}
.tl-plain .ph{font-size:14px; font-weight:500; border-bottom:1.5px dashed currentColor}
.tl-plain p{margin:0}