/* the sitemap page: plain lists of links, then a tree of the XML sitemaps */
.sm-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.sm-links a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0;padding:11px 14px;border-radius:12px;background:var(--blush-2);font-size:14px;font-weight:600;transition:background .2s,color .2s}
.sm-links a:hover,.sm-links a:active{background:var(--blush);color:var(--red)}
.sm-links span{min-width:0}
.sm-links small{flex:none;max-width:50%;font-size:12px;font-weight:500;color:var(--grey);text-align:right}
.sm-long{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm-sub{margin:24px 0 0;font-size:18px;letter-spacing:-.02em}

.sm-tree{max-width:720px;margin-top:6px}
.sm-tree a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-radius:12px;font-weight:700;transition:background .2s,color .2s}
.sm-tree small{flex:none;font-size:13px;font-weight:500;color:var(--grey)}
.sm-root{background:var(--black);color:#fff}
.sm-root small{color:var(--blush-3)}
.sm-root:hover,.sm-root:active{background:var(--red)}
.sm-root:hover small,.sm-root:active small{color:#fff}
.sm-tree ul{margin:0 0 0 18px;padding:0;list-style:none;border-left:1px solid var(--blush-3)}
.sm-tree li{position:relative;padding:8px 0 0 22px}
.sm-tree li::before{content:"";position:absolute;left:0;top:30px;width:18px;height:1px;background:var(--blush-3)}
.sm-tree li:last-child::after{content:"";position:absolute;left:-1px;top:31px;bottom:0;width:1px;background:var(--white)}
.sm-tree li a{background:var(--blush-2);font-size:15px}
.sm-tree li a:hover,.sm-tree li a:active{background:var(--blush);color:var(--red)}

@media (max-width:1100px){.sm-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.sm-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* guide titles are long, so they get the full width on phones */
@media (max-width:1100px){.sm-long{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sm-long{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){
  .sm-links a{flex-direction:column;gap:2px}
  .sm-links small{max-width:none;text-align:left}
  .sm-tree ul{margin-left:10px}
  .sm-tree li{padding-left:14px}
  .sm-tree li::before{width:10px}
}