/* Browse pages: one per accord family, one per sub-line.
   Rides entry.css's tokens; the family tint arrives as --h/--s/--l from accords.csv. */

/* .bar .home now lives in entry.css, which every browse page already links. */

.browse-head{padding:6px 0 2px}
.browse-head .kicker{font-size:11.5px;font-weight:590;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-ink3)}
.browse-head h1{margin-top:7px;font-size:30px;font-weight:640;letter-spacing:-.03em;
  line-height:1.1;text-transform:capitalize}
.browse-head .lede{margin-top:9px;font-size:14.5px;line-height:1.5;
  color:var(--color-ink2);max-width:56ch}
.browse-head .lede b{font-weight:590;color:var(--color-ink)}

.browse-head.tinted{margin:2px 0 0;padding:16px 16px 17px;border-radius:var(--radius-base);
  background:linear-gradient(140deg,hsl(var(--h) calc(var(--s) * .9) 93%),
    hsl(var(--h) calc(var(--s) * .5) 98%));
  border:.5px solid hsl(var(--h) calc(var(--s) * .5) 84% / .8)}
.browse-head.tinted .kicker{color:hsl(var(--h) calc(var(--s) * .45) 34%)}
.browse-head.tinted .lede{color:hsl(var(--h) calc(var(--s) * .3) 28%)}
.browse-head.tinted .lede b{color:hsl(var(--h) calc(var(--s) * .55) 22%)}

.policy p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--color-ink2);max-width:60ch}
.policy p b{font-weight:590;color:var(--color-ink)}

.rows{margin-top:18px;border:.5px solid var(--color-line);border-radius:var(--radius-base);
  background:var(--color-card)}
.row-item{display:block;padding:12px 15px;text-decoration:none;color:inherit;
  border-bottom:.5px solid var(--color-line)}
.row-item:last-child{border-bottom:0}
.row-item b{font-size:15px;font-weight:560;letter-spacing:-.01em}
.row-item span{display:block;margin-top:1px;font-size:12.5px;color:var(--color-ink3)}
.row-item i{display:block;margin-top:3px;font-style:normal;font-size:13px;
  line-height:1.4;color:var(--color-ink2)}

/* Only the rows that are real links get the affordance. */
a.row-item{position:relative;padding-right:34px;transition:background-color .14s}
a.row-item::after{content:"→";position:absolute;right:15px;top:12px;
  font-size:13px;color:var(--color-accent)}
a.row-item:hover{background:var(--color-sunk)}
a.row-item b{color:var(--color-accent)}
div.row-item b{color:var(--color-ink)}

@media (min-width:880px){
  .browse-head h1{font-size:40px;letter-spacing:-.035em}
  .browse-head .lede{font-size:16.5px}
  .browse-head.tinted{padding:22px 24px 24px;border-radius:var(--radius-lg)}
  .rows{columns:2;column-gap:0;border-radius:var(--radius-lg)}
  .row-item{break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){ a.row-item{transition:none} }