/* ==========================================================================
   Beattier v4 site chrome shared by the concept pages: violet copy helpers,
   footer. Colours from tokens.css only.
   ========================================================================== */
.on-violet .display em { color: var(--black); }
.on-violet .wordmark { color: var(--white); }
.on-violet .btn--ink { background: var(--white); color: var(--black); }

.footer { padding: 90px 0 0; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand p { color: var(--text-2); margin: 16px 0 26px; max-width: 32ch; font-size: 16px; }
.footer__col { display: grid; gap: 12px; align-content: start; font-size: 15px; }
.footer__col b { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.footer__col a { color: var(--text-2); font-weight: 500; }
.footer__col a:hover { color: var(--accent-text); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--hairline);
  color: var(--text-3); font-size: 13px;
}
.footer__mark {
  display: block; font-size: clamp(60px, 20.5vw, 320px); color: var(--wordmark);
  white-space: nowrap; margin: 30px 0 -0.2em; text-align: center; letter-spacing: -0.05em;
}
@media (max-width: 900px) {
  .footer { padding-top: 64px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { margin-top: 48px; flex-direction: column; gap: 6px; }
}

/* nav: Home, Library, Pro. The current tab sits in a pill. */
.nav__links { gap: 6px; }
.nav__links a { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); transition: color .15s, background-color .15s; }
.nav__links a:hover { color: var(--text); background: var(--nav-hover); }
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]:hover { background: none; }
.nav__pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--nav-pill); view-transition-name: nav-pill; }
/* The nav is pinned to the top; in-page jumps stop below it. */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }

@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  .nav { gap: 10px; }
  .nav__links { display: flex; gap: 2px; font-size: 14px; margin-left: auto; }
  .nav__links a { height: 34px; padding: 0 11px; }
}
@media (max-width: 440px) {
  .nav__cta { display: none; }
}

/* ---- page transitions between tabs ------------------------------------------
   Same-origin navigations animate with the browser's View Transitions API:
   the nav holds still, the current-tab pill slides to its new tab and the page
   slides in the direction of travel (js/transitions.js sets the direction).
   Browsers without support simply load the next page. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
/* The nav keeps its own full-width violet so it stays solid while the page
   underneath slides. */
.nav.on-violet { background: var(--violet-500); box-shadow: 0 0 0 100vmax var(--violet-500); clip-path: inset(0 -100vmax); }
/* The nav is the same bar on every page, so it never fades: the new nav is
   shown at full strength from the first frame and the old one is dropped.
   Cross-fading two identical bars dims them midway in some browsers. */
::view-transition-group(site-nav), ::view-transition-new(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-group(nav-pill) { animation-duration: var(--vt-duration); animation-timing-function: var(--vt-ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--vt-duration); animation-timing-function: var(--vt-ease); }
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
html:active-view-transition-type(backward)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(backward)::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { transform: translateX(-40px); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(40px); opacity: 0; } }
@keyframes vt-in-right { from { transform: translateX(40px); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}