:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;
  --sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  --r-sm:4px;--r-md:8px;--r-lg:14px;--r-pill:999px;
  --tap:44px;
}

.crumb{line-height:1.9}
.crumb a{padding:2px 0;display:inline-block}

.rel a,.src a{padding:2px 0;display:inline-block}

.wrap-t{
  overflow-x:auto;
  background-image:
    linear-gradient(to right,var(--paper) 32%,transparent),
    linear-gradient(to left,var(--paper) 32%,transparent),
    radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 16%,transparent),transparent),
    radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 16%,transparent),transparent);
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}

a.cta{
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-3) 22px;
  border-radius:var(--r-md);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  transition:transform .2s,filter .2s;
}
a.cta:hover{filter:brightness(1.06)}
a.cta:active{transform:translateY(1px)}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
