/* Links page (links.chromeboston.com). Loaded after site.css, which provides the font,
   colours and base styles. Buttons use the site's pill language (like "View all"). */

.lp-body{background:var(--black)}
.lp{max-width:520px;margin:0 auto;padding:40px 20px 48px;text-align:center}

.lp__head{display:flex;flex-direction:column;align-items:center}
.lp__logo{width:min(220px,60vw);height:auto}
.lp__handle{margin-top:14px;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.lp__tagline{margin-top:8px;max-width:34ch;font-size:15px;line-height:1.4;color:var(--grey)}

/* Latest release: cover, catalogue number, title. The whole card is the link. */
.lp__latest{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;margin-top:28px;padding:10px 16px 10px 10px;text-align:left;
  border:2px solid var(--white);border-radius:24px}
.lp__cover{width:72px;height:72px;border-radius:14px;object-fit:cover}
.lp__latest-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp__kicker{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.lp__title{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.lp__cta{font-size:14px;font-weight:800;color:var(--green)}

/* Buttons: white outline pills, uppercase, icon + text; invert on hover. */
.lp__links{display:flex;flex-direction:column;gap:10px;margin-top:20px;list-style:none;padding:0}
.lbtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 20px;border:2px solid var(--white);border-radius:999px;
  color:var(--white);font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.lbtn svg{width:20px;height:20px;flex-shrink:0}
.lbtn__logo{width:20px;height:20px;flex-shrink:0}
.lbtn:hover,.lbtn:focus-visible,.lp__latest:hover,.lp__latest:focus-visible{background:var(--white);color:var(--black)}
.lbtn:hover .lbtn__logo,.lbtn:focus-visible .lbtn__logo{filter:invert(1)}
.lp__latest:hover .lp__kicker,.lp__latest:focus-visible .lp__kicker{color:#555}
.lp__latest:hover .lp__cta,.lp__latest:focus-visible .lp__cta{color:#00a83a}
.lbtn:active,.lp__latest:active{transform:scale(.97)}

.lp__foot{margin-top:36px;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:no-preference){
  .lbtn,.lp__latest{transition:background-color .2s ease,color .2s ease,transform .1s ease-out}
  /* Load-in: logo settles, then everything arrives one after another. */
  .lp__logo{animation:lp-logo 1s cubic-bezier(.2,.8,.2,1) both}
  .lp__handle,.lp__tagline,.lp__latest,.lp__links li,.lp__foot{animation:lp-in .6s cubic-bezier(.2,.8,.2,1) both}
  .lp__handle{animation-delay:.12s}
  .lp__tagline{animation-delay:.18s}
  .lp__latest{animation-delay:.24s}
  .lp__links li:nth-child(1){animation-delay:.3s}
  .lp__links li:nth-child(2){animation-delay:.34s}
  .lp__links li:nth-child(3){animation-delay:.38s}
  .lp__links li:nth-child(4){animation-delay:.42s}
  .lp__links li:nth-child(5){animation-delay:.46s}
  .lp__links li:nth-child(6){animation-delay:.5s}
  .lp__links li:nth-child(7){animation-delay:.54s}
  .lp__links li:nth-child(8){animation-delay:.58s}
  .lp__links li:nth-child(n+9){animation-delay:.62s}
  .lp__foot{animation-delay:.66s}
}
@media (prefers-reduced-motion:reduce){.lbtn:active,.lp__latest:active{transform:none;opacity:.7}}
@keyframes lp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lp-logo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-contrast:more){.lp__kicker,.lp__foot{color:#fff}}

/* On brand with the website: buttons and the release card use the nav pill's dark grey
   (#262626) and turn white on hover like "View all"; greys and the green Buy/Stream are
   the site's own. The logo artwork sits on a dark navy square, so its edges fade out
   with a soft circular mask and it melts into the black page. */
.lp{padding-top:28px}
.lp__logo{width:min(300px,78vw);margin-bottom:-18px;
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 48%,#000 70%,rgba(0,0,0,.6) 84%,transparent 100%);
  mask-image:radial-gradient(closest-side circle at 50% 48%,#000 70%,rgba(0,0,0,.6) 84%,transparent 100%)}
.lp__handle{position:relative;font-size:20px;letter-spacing:-.02em}
.lp__tagline{color:var(--grey)}
.lbtn,.lp__latest{border:0;background:var(--nav);color:var(--white)}
.lbtn{min-height:58px;font-size:14px;font-weight:600;letter-spacing:.02em}
.lp__latest{padding:10px 18px 10px 10px}
.lp__kicker{color:var(--muted)}
.lp__cta{color:var(--green)}
.lbtn:hover,.lbtn:focus-visible,.lp__latest:hover,.lp__latest:focus-visible{background:var(--white);color:var(--black)}
.lp__foot{color:var(--muted)}
@media (prefers-contrast:more){.lbtn,.lp__latest{border:2px solid var(--white)}}