/* The Silsila page. Scoped under .sl. The chain itself uses the shared .path and .link styles in site.css. */
.sl .titlebar { padding-block: 1.2rem 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: baseline; justify-content: space-between; }
.sl .titlebar h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sl .titlebar h1 .ur { font-size: 0.55em; color: var(--sage); font-weight: 400; }
.sl .titlebar p { color: var(--moon-dim); max-width: 34rem; }
.sl .cols { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sl .docs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5.4rem); }
.sl .docs h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.sl .docs > p { color: var(--moon-dim); margin-bottom: 1rem; }
.sl .docs ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sl .docs a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1rem 0.2rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.sl .docs b { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sl .docs a:hover b { transform: translateX(0.4rem); }
.sl .docs b { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.sl .docs small { display: block; color: var(--moon-dim); font-size: 0.88rem; margin-top: 0.1rem; }
.sl .docs .tag { color: var(--lamp); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* the chain as one left-aligned path */
.sl .chainwrap .path { margin-top: 0; }
.sl .chainwrap .path::before, .sl .chainwrap .path::after { left: 14px; }
.sl .chainwrap .link { grid-template-columns: 1fr; }
.sl .chainwrap .link::before { left: 14px; }
.sl .chainwrap .link .body, .sl .chainwrap .link:nth-child(even) .body { grid-column: 1; text-align: left; padding-left: 3rem; padding-right: 0; }
.sl .chainwrap .link .ur, .sl .chainwrap .link:nth-child(even) .ur { text-align: left; }
.sl .chainwrap .link .en { text-align: left; }

@media (max-width: 880px) {
  .sl .cols { grid-template-columns: minmax(0, 1fr); }
  .sl .docs { position: static; }
}
@media (max-width: 520px) {
  .sl .chainwrap .link .body, .sl .chainwrap .link:nth-child(even) .body { padding-left: 2.4rem; }
}